最佳阅读体验点这里：https://www.yuque.com/coder-5wtaq/ce47ub/bg0qdn
基建之vite
vite之vue-ts
- vite创建项目 yarn create vite picc-user-auth-sys-vue3.0 --template vue-ts
- 安装element、router、bus、vuex、sass
vite配置
- 路径别名
// 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: {
alias: {
"@": path.resolve(__dirname, "./src") // map '@' to './src'
},
},
})基建之sass
- vite建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件
- 话虽如此，但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。
- 依赖安装： yarn add sass -D
基建之element
自定义主题 --- todo
按需引入组件
- 安装组件库依赖 yarn add element-plus
- 需要装辅助插件 vite-plugin-style-import，用于帮助导入样式。
yarn add vite-plugin-style-import -D
- 安装sass依赖
- 入口文件引入样式文件 element-plus/packages/theme-chalk/src/base.scss
- 修改配置文件 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [{
libraryName: 'element-plus',
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
name = name.slice(3)
return `element-plus/packages/theme-chalk/src/${name}.scss`;
},
resolveComponent: (name) => {
return `element-plus/lib/${name}`;
},
}]
})
]
})- 按需引入组件（优雅方式）
import { components, plugins } from './plugins/element-plus'
// 按需导入Element Plus组件和插件
components.forEach(component => {
app.component(component.name, component)
})- 引入项目常见插件
基建之router
插件安装
- 安装依赖 yarn add vue-router@next
- 创建路由表文件 router.js
import { createRouter,createWebHistory} from "vue-router";
// 路由信息
const routes = [
{
path: "/",
name: "Index",
component: () => import('../views/index/index.vue'),
},
{
path: "/test",
name: "test",
component: () => import('../views/index/test.vue'),
},
];
// 导出路由
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;router新旧对比
入门 | Vue Router (vuejs.org)
- router-view
基建之vuex
- 安装依赖 yarn add vuex@next
基建之eventBus
- 使用mitt
- 或者自己写一个发布订阅
mitt
6.3k star
1、执行 yarn add mitt
2、创建bus.js 文件内容如下：（可与main.js同级）
import mitt from 'mitt'
const bus = {}
const emitter = mitt()
bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit
export default bus
3、main.js 加入内容如下：
import Bus from './bus.js'/// mitt 总线程引入
Vue.prototype.bus = Bus;
4、使用如下：
兄组件：
methods: {
workOrdChange(val) {
let self = this;
self.bus.$emit('dr-workOrd-change', val)
}
}
弟组件：
created() {
let self = this;
self.bus.$on("dr-workOrd-change", (val) => {
let drO = val;
console.log("drO in" + drO);
});
},
完毕！自己实现 --- todo
/ 为保持和vue2版本中使用bus一致，emit,on,off前面都加了$
class Bus {
list: { [key: string]: Array<Function> };
constructor() {
// 收集订阅信息,调度中心
this.list = {};
}
// 订阅
$on(name: string, fn: Function) {
this.list[name] = this.list[name] || [];
this.list[name].push(fn);
}
// 发布
$emit(name: string, data?: any) {
if (this.list[name]) {
this.list[name].forEach((fn: Function) => {
fn(data);
});
}
}
// 取消订阅
$off(name: string) {
if (this.list[name]) {
delete this.list[name];
}
}
}
export default Bus;基建之typescript
- 通过vite-cli的模板支持
基建之公共样式 --- todo
脚手架plop之路由页面生成
- 安装plop yarn add plop -D
- 配置文件 plopfile.js
- 模板文件目录
vue2.x迁移vue3.x
element-plus 组件库语法变更
- input的slot
<!-- old：slot="prepend" -->
<el-input v-model="param.username" placeholder="username">
<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
</el-input>
<!-- new: #prepend -->
<el-input placeholder="请输入内容" v-model="input1">
<template #prepend>Http://</template>
</el-input>zp-components语法变更
基础业务之拦截器
基础布局组件之layout
基础布局组件之sideBar
基础布局组件之Tags
基础布局组件之header
业务组件之table
业务组件之form
业务组件之pagination
开箱即用项目
- v0.1.0 已经完成常用基建的项目模板
vite优缺点
缺点：1. 样式修改手动刷新才能生效；
