「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」
写在前面: 这个是我写给自己看的,便于以后能快速上手Vue3项目,目前就是处于学了vue3但还是用vue2开发的阶段,好记性不如烂笔头,学一遍记一遍,强化记忆.
事关我对于Vue3项目搭建的一些记录
vite代替webpack的配置文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base:"./",//打包路径
resolve: {
alias:{
'@': path.resolve(__dirname, './src'),//设置别名
}
},
// 打包配置
build: {
target: 'modules',
outDir: 'dists', //指定输出路径
assetsDir: 'assets', // 指定生成静态资源的存放路径
minify: 'terser' // 混淆器，terser构建后文件体积更小
},
//全局配置scss变量
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/assets/scss/global";'
}
}
},
server: {
port:8084,//启动端口
open: true,
proxy: {
'/api': {
target: 'https://localhost:8084',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
},
cors:true
}
})
复制代码vscode的代码提示插件
//Prettier 代码美化
//Volar 格式化代码
//unplugin-vue-components 组件自动引入
复制代码配置tsconfig.json
//还没研究过
复制代码全局样式
style
- index.scss //入口 管理文件
- element.scss // 组件穿透样式
- global.scss // 全局样式
- color.scss //颜色管理
- var.scss //变量管理
复制代码Tailwind.css
类似与bs框架的样式使用,之前没发现的时候会自己写一个scss样式文件,作用就是把
display:flex;justify-content: space-between;align-items: center;变成<div class="d-flex"> </div>
//其实Tailwind.css的基础作用就是这个,复杂的一般也用不上
复制代码pinia-->vuex的替代方案
如果说,项目整体像vue3+ts靠拢的话,那vuex应该也会被取代,因为vuex对ts的支持比较有限,出现替代品也是理所应当的.
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'user',
state: () =>({}),
getters: {},
actions: {}
})
复制代码特点
- Pinia的API设计非常接近 vuex5 的提案(vue的核心团队设计)
- Pinia 与 Vue devtools同样适配,跟vuex食用方式一致
- 天生具备类型推断(ts底层)
区别
- id 是必要的，它将所使用 store 连接到 devtools。
- 创建方式：
new Vuex.Store(...)(vuex3)，createStore(...)(vuex4)。 - 对比于 vuex3 ，state 现在是一个函数返回对象。
- 没有 mutations，不用担心，state 的变化依然记录在 devtools 中。
- 放弃了mutations,完全使用Actions
异步请求(axios)
关于异步请求,使用方式大同小异,只不过现在加入了ts,一些函数语法发生改变,这边记录一些关于异步请求的常规操作
- 通过
import.meta.env.VITE_APP_BASE_URL获取环境变量，配置baseURL，如果接口存在多个不同域名，可以通过 js 变量控制。 - 设置
timeout请求超时、断网情况处理。 - 设置请求头，携带
token。 - 异常拦截处理，后端通过你携带的
token判断你是否过期，如果返回401你可能需要跳转到登录页面，并提示需要重新登录。 - 响应拦截，通常后端返回 code、data、msg，如果是请求正常，我们可以直接返回 data 数据，如果是异常的 code，我们也可以在这里直接弹出报错提示。
- 无感刷新 token，如果你的 token 过期，可以通过后端返回的 refreshToken 调用刷新接口，获取新的 token。当然这里涉及到很多细节，例如终端请求、重新发送请求、重新请求列队。
- 中断请求，例如页面切换时，我们要中断正在发生的请求。
路由管理(vue-router4)
同样也是支持了ts的写法配置路由的类型是 RouteRecordRaw，这里 meta 可以让我们有更多的发挥空间，这里提供一些参考：
- title: string; 页面标题，通常必选。
- icon?: string; 图标，一般配合菜单使用。
- auth?: boolean; 是否需要登录权限。
- ignoreAuth?: boolean; 是否忽略权限。
- roles?: RoleEnum[]; 可以访问的角色
- keepAlive?: boolean; 是否开启页面缓存
- hideMenu?: boolean; 有些路由我们并不想在菜单中显示，比如某些编辑页面。
- order?: number; 菜单排序。
- frameUrl?: string; 嵌套外链。
未完