使用Vite构建Vue项目，整合vuex、vue-router、axios、scss

从webpack到Vite，为什么推荐使用Vite，而不是vue-cli，因为Vite是一种新的、更快地 web 开发工具

Vite的优势：

Vite具有如下特点：

1. 快速的冷启动
2. 即时的模块热更新
3. 真正的按需编译

使用Vite构建的项目和使用Vue-cli构建的项目对比，给我最直观的感受有两点：

1. Vite：冷启动时，几乎秒启动
2. Vite：热更新时，保存代码和页面渲染几乎同时完成

原因可参考官网解释：为什么选 Vite | Vite.js中文网 (vitejs.net)

如何使用Vite构建项目：

安装和创建项目：（开箱即用）

npm init @vitejs/app my-vue-app --template vue

打开项目，项目结构如下：

由图可知，代码结构与Vue-cli构建的项目类似

整合router(路由)

安装：

npm install vue-router@next

创建一个文件，用来配置route:

router.js中：

import { createRouter,createWebHistory} from "vue-router"
//已经创建好了login和home组件，这里不过多赘述
//且配置好了根路径别名：‘@’，后面会讲（常用的配置）

const routes = [
  {
    path:'/',
    redirect: 'login'
  },
  {
    path:'/login',
    component: () => import('@/pages/login/login.vue')
  },
  {
    path:'/home',
    component: () => import('@/pages/home/home.vue')
  }
]

// 导出路由
const router = createRouter({
  history: createWebHistory(),  //开启history模式
  routes
});

export default router;

创建好了router文件后，记得一定要导出，在main.js中使用

//main.js

import { createApp } from 'vue'
import App from '@/App.vue'

//导入router配置文件
import route from '@/route/router'

//类似于:
/**
vue-cli:

Vue.use(router)
const app = new Vue({
	render: h => h(App)
}).$mount("#app")
*/
const app = createApp(App)
//全局注册
app.use(route)

app.mount('#app')

启动项目：npm run dev

访问：localhost:3000 (样式会在整合sass中讲解)

整合Vuex：（相对比较简单）

可以参考官网：https://next.vuex.vuejs.org/

安装：

npm install vuex@next --save

新建文件store.js:

//store.js:

import { createStore } from 'vuex'
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  getters:{
    getCount(state){
      return state.count
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store

在main.js中使用：

// main.js：

import { createApp } from 'vue'
import App from '@/App.vue'

import route from '@/route/router'
import store from '@/store/store'

const app = createApp(App)
//全局注册
app.use(route)
app.use(store)

app.mount('#app')

在login中使用Vuex中的数据：在Vue3中至此多个根节点

<template>
  <h1>登录</h1>
  <button @click="login">点击登录</button>
  <router-link to="/home">跳转</router-link>
<!--这里是vuex的数据，不要直接在这里使用：this.$store.state.count-->
  <h3>{{count}}</h3>
  <button @click="click">添加</button>
</template>
<script>  
export default {
  data(){
    return {
      count:this.$store.state.count  //注意这一块
    }
  },
  methods:{
    click(){
      this.$store.commit('increment')
      this.count = this.$store.state.count
    }
  },
}
</script>

整合axios：

安装：

npm install axios

配置axios，新建两个文件：

//axios.js: axios配置

import axios from 'axios'

const http = axios.create({
  // baseURL:"http://localhost:8080/", //配置 baseURL
  timeout:3000, //配置请求超时时间
})
//请求拦截器
http.interceptors.request.use((config) => {
  //在发送请求之前的业务逻辑
  console.log("请求之前")
  return config
},(error) => {
  //请求发生错误的业务逻辑
  console.log("请求发生错误")
  return Promise.reject(error)
})

//响应拦截器
http.interceptors.response.use((response)=>{
  //对响应数据的处理
  //如果后端响应的状态不是200，那么直接抛出异常
  console.log("响应成功")
  if(response.data.status != 200){
    return Promise.reject(response)
  }else{
    return Promise.resolve(response);
  }
},(error) => {
  console.log("响应出现错误")
  if(error.response.status){
    //响应错误
    let status = error.response.status
    //根据不同的状态码，提示不同的信息
    switch(status){
      case 404:
        console.log("你访问的网页不存在")
        break
      case 401:
        console.log("身份验证失败")
        break
      case 403:
        console.log("登录过期")
        break
      default:
        console.log(error.response.data.msg) //其他的错误，抛出错误提示
    }
    return Promise.reject(error)
  }
})

export default http

//api.js: 请求方法封装

import http from "@/request/axios.js"
import qs from 'qs'   //把参数序列化
//qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

const api = {}
//封装login方法
api.loginFun = (username,password) => {
  let url = `login`
  let response = http.post(url,qs.stringify({
    username,
    password
  }))
  console.log("response: "+response)
  return response
}

export default api

如何使用封装后的loginFun方法：

将封装的方法挂载为全局方法，这样就可以在任一组件中调用，在main.js中配置：

import { createApp } from 'vue'
import App from '@/App.vue'

import route from '@/route/router'
import store from '@/store/store'
import api from '@/request/api.js'  //导入封装后的请求方法

const app = createApp(App)
app.use(route)
app.use(store)

//主要代码如下：
//挂载全局属性或者方法，类似于 Vue.prototype.$api = api
app.config.globalProperties.$api = api

app.mount('#app')

挂载好方法后，在组件中调用方法：

<template>
  <h1>登录</h1>
  <button @click="login">点击登录</button>
  <router-link to="/home">跳转</router-link>
  <h3>{{count}}</h3>
  <button @click="click">添加</button>
</template>
<script>  
export default {
  data(){
    return {
      count:this.$store.state.count
    }
  },
  mounted(){
    // console.log(this.$axios)
  },
  methods:{
    click(){
      this.$store.commit('increment')
      this.count = this.$store.state.count
    },
    login(){
      //调用封装好的请求方法
      let response = this.$api.loginFun("admin","123")
    }
  },
}
</script>

发起登录请求：（我的接口在本地，会出现跨域的问题，所以需要在配置文件中配置代理，后面会讲解）

整合scss：

安装：

npm install sass

在组件中使用：指定语言lang="scss"，@mixin和@include都是scss中的用法

//在login.vue中：
...
<style lang="scss" scoped>
@mixin styleFun(){
  color: red;
  border: 1px solid red;
  background: green;
}
h1{
  @include styleFun()
}
</style>

常用的配置，如下：

//vite.config.js:

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

import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{ 
    //配置根路径别名： import('@/pages/login/login.vue')
    alias: {
      "@": path.resolve(__dirname, "src")
    },
  },
  server:{
    host: '0.0.0.0',  //配置host，0.0.0.0：时可以通过ip地址访问
    port: 3000,  // 配置启动端口
    open: true,  //项目启动自动在浏览器中打开
    https: false, //是否启用https
    proxy:{  //配置代理，解决跨域问题
      "/login":{
        target:"http://localhost:8888/",
        changeOrigin:true
      }
    }
  }
})

与Vue-cli不同使用方式：

• 挂载全局方法：app.config.globalProperties.$api = api
• 注册全局组件：app.component("myGlobal",global)

main.js全部代码：

import { createApp } from 'vue'
import App from '@/App.vue'

import route from '@/route/router'
import store from '@/store/store'
import api from '@/request/api.js'

import global from '@/components/global.vue'

const app = createApp(App)
app.use(route)
app.use(store)

//挂载全局属性，或者方法，类似于 Vue.prototype.$api = api
app.config.globalProperties.$api = api

//注册全局组件
app.component("myGlobal",global)

app.mount('#app')