学完vue3之后一直感觉手痒痒想用vue3做项目，正好最近公司不是很忙，就以公司现开发项目为模板将公司项目升级3.0。
项目搭建
01. 搭建项目
vue create qitaijk3.0
选择自定义第三个
选择125678(空格选中)回车确定
选择3
选择n
选择less
选择第三个 Standard config
两个都选中
选择第一个
选择n
到这里搭建就已经完成了
以上用户可根据自己喜好进行配置。新手建议跟随作者进行配置
完成之后可以先尝试运行项目
也可以使用npm run serve 我这边使用的是yarn
Vuex配置
完成了上面配置 接下里我们就进入到vuex的配置中
首先因为vuex的数据我们需要做持久化，所以首先下载vuex持久化插件
npm i vuex-persistedstate 或 yarn add vuex-persistedstate
老规矩，还是分模块
在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 database.js
user.js
// 用户模块 export default { namespaced: true, state () { return { setUser: { } } }, mutations: { setUser (state, setUser) { state.setUser = setUser } } }
database.js
// 分类模块 export default { namespaced: true, state () { return { database: [] } } }
store/index.js
然后接下来在store的首页引入持久化插件进行使用
import { createStore } from 'vuex' // 引入持久化插件 import createPersistedstate from 'vuex-persistedstate' import user from './modules/user' import database from './modules/database' export default createStore({ modules: { user, database }, plugins: [ createPersistedstate({ key: 'haihaina', // 存储的名字 paths: ['user', 'database'] // 持久化的模块 }) ] })
axios
接下来就到了封装axios
首先第一步还是需要下载axios
npm i axios 或 yarn add axios
新建 src/utils/request.js 模块
// 1. 创建一个新的axios实例
// 2. 响应拦截器：2.1. 剥离无效数据 2.2. 处理token失效
// 3. 导出一个函数，调用当前的axsio实例发请求，返回值promise
// 1. 创建一个新的axios实例 import axios from 'axios' // 导出基准地址 export const baseURL = '公司项目的地址' const instance = axios.create({ // axios 的一些配置，baseURL timeout baseURL, timeout: 5000 }) instance.interceptors.request.use(config => { return config }, err => { return Promise.reject(err) }) // 2. 响应拦截器：2.1. 剥离无效数据 2.2. 处理token失效 instance.interceptors.response.use( // res => res.data 取出data数据，将来调用接口的时候直接拿到的就是后台的数据 res => res.data, err => { return Promise.reject(err) }) // 3. 导出一个函数，调用当前的axsio实例发请求，返回值promise // 请求工具函数 export default (url, method, submitData) => { // 负责发请求：请求地址，请求方式，提交的数据 return instance({ url, method, // 1. 如果是get请求 需要使用params来传递submitData ?a=10&c=10 // 2. 如果不是get请求 需要使用data来传递submitData 请求体传参 [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData }) }
到这里我们Vue3的项目就已经基本上完成啦，下面就可以按照自己公司项目需求进行项目的路由的设计，如果这篇文章对您有所帮助，欢迎点赞收藏。
