Vite2.0搭建Vue3.0项目应用实战

前言

最近Vite2.0很火热,说是要替代webpack作为下一代前端构建工具。上个周末搬完房子仔细研究了一下,照着我们目前的项目环境,尝试搭建了一套基础环境,简单了解了Vite2.0的配置,以及各种库的集成。这里对Vite2.0不做过多的介绍,主要优点就是

环境配置

一条命令创建一个空的vite项目

npm init @vitejs/app vite-project

   

在终端,输入以上命令,会让你选择模板。

看文章标题我们就知道,我们选择的是vue的模板,


这是创建后的文件目录结构,和vue-cli 脚手架类似,配置文件都存放一个文件,叫做vite.config.js

默认内容是

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})

在项目根目录运行

npm run dev

 

默认在本地3000端口启动服务。
所以使用浏览器访问 http://localhost:3000/ 就能看到如下的欢迎界面

集成Element

因为我们使用的Vue3.0,所以要使用Element-ui的话就必须要使用,Element Plus 这是一个使用vue3来编写的vue组件库,
官方地址
要集成到项目中也很简单

npm install element-plus --save

 

运行以上命令先安装element-plus

然后在入口文件main.js中引入相应的库

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

 

然后将ElementPlus挂载到Vue的原型上,并将主题的大小设置为 small

createApp(App).use(ElementPlus,{size: 'small'}).mount('#app')

 

这样引用后就可以全局使用ElementPlus,稍微测试一下

找到HelloWorld.vue组件, 添加一行代码

<el-button type="primary">查询</el-button>

 

报错后,无需刷新,查看页面

生效了。集成ElementPlus IS DONE !

集成vue-router

Vite脚手架生成的vue项目,目前是没有集成vue-router的,没关系,自己动手丰衣足食。说干就干

第一步

安装vue-router
这里注意一下,一点要安装vue-router的4.x版本,要不然无法和Vue3.x搭配使用。

npm install vue-router@4 --save

 
  • 1
第二步

创建 /src/router/index.js
写入以下内容

import { createRouter, createWebHashHistory } from 'vue-router'
const router = new createRouter({
	history:createWebHashHistory(),
	routes:[
		{
			path:'/',
			redirect:'/home'
		},
		{
			path:'/home',
			component:() => import('../views/Home.vue')
		},
    {
			path:'/user',
			component:() => import('../views/Users.vue')
		},
	]
})

router.beforeEach((to,from,next) => {
console.log(to,from,111);
next();
})

export default router;

创建了router对象,是hash模式的路径,
主要配置了二个路径, 分别是

  • /home 指向 /src/views/Homme.vue
  • /user 指向 /src/views/User.vue
第三步

创建 views/Homme.vueviews/Homme.vue 二个组件。

创建路由后,要补充创建 views/Homme.vueviews/Homme.vue 二个组件。
内容分别是

<template>
 My Home Page
</template>

 
<template>
 My Users Page
</template>

 
第四步

修改 App.vue的内容

<template>
   <div id='nav'>
    <router-link class="link" to='/home'>Home</router-link> |
    <router-link class="link" to='/user'>User </router-link>
  </div>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
  </div>
  <router-view></router-view>
</template>

 
第五步

main.js中引入并挂载router

// ...
import router from "./router";
createApp(App)
  .use(ElementPlus,{size: 'small'})
  .use(router)
  .mount('#app')
// ...

 

重新启动项目,访问 http://localhost:3000/

预览效果如下:

集成less

在vue中可以这样使用less

<style lang="less">
.page-name {
  color: red;
  span {
    color: blue;
  }
}
</style>

 

但直接使用会报错,如下图

需要在项目中安装less

npm i less --save

 
  • 1

安装完成就不报错了。

代理配置

vite.config.js中配置
将请求地址以 /api开头的地址映射到 http://jsonplaceholder.typicode.com/, 并移除 /api

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

 

集成axios

在vue中如果我们要与后端交互,就要使用http相关的库,如axios
下面是封装集成axiso到vite项目中

第一步

安装axios

npm i axios --save

 
  • 1

创建 src/util/http.js, 内容如下

import axios from "axios";
var service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
  responseType: "json",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    Authorization:
      "Bearer eyJrIjoiZ1BkdjFuVWhpVFJYVDFnNlI4aWVkNjloM3hGSDRUbXkiLCJuIjoidGVzdCIsImlkIjoxfQ=="
  }
});
// 添加请求拦截器
service.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
service.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    return response;
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
export default service;

 
第二步

创建 server/user.js 一个接口示例 获取用户列表
内容如下

import fetch from '../util/http'
export function getUser () {
  return fetch({
    url: '/api/users',
    methods: 'get'
  })
}

 
第三步

修改User.vue

<template>
 My User Page
<el-form-item>
  <el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
<el-row>
  <el-col :span="12" :offset="6" >
    <el-table :data="state.tableData" style="width: 100%" v-loading="state.loading">
      <el-table-column prop="name" label="用户名" width="180"></el-table-column>
      <el-table-column prop="website" label="网站" width="180"></el-table-column>
      <el-table-column prop="phone" label="手机"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
    </el-table>
  </el-col>
</el-row>
</template>
<script setup>
import {getUser} from '../server/user'
import { reactive } from 'vue'
const state = reactive({
  loading:false,
  tableData: []
})
const onSubmit = () => {
  state.loading = true
  getUser().then(res => {
    state.loading = false
    state.tableData = res.data
    console.log(state.tableData)
  })
}
</script>

 

预览效果


码字不易,在线求个三连支持。

大家记得收藏前,先点个赞哦!好的文章值得被更多人看到。

关注江哥不迷路,带你编程上高速。

加入Q群与更多BAT一线大佬深度交流:1136157571


微信公众号关注:江小鱼吧 免费领取高级前端学习资料,转身涨薪20K

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…