学完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的项目就已经基本上完成啦，下面就可以按照自己公司项目需求进行项目的路由的设计，如果这篇文章对您有所帮助，欢迎点赞收藏。
有什么问题点击下方链接提问
http://print.haihaina.cn/qr.jpg