最佳阅读体验点这里：基建之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.jsimport { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import path from "path";//  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.onbus.$off = emitter.offbus.$emit = emitter.emitexport default bus3、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>;/template>  </el-input>

zp-components语法变更

基础业务之拦截器

基础布局组件之layout

基础布局组件之sideBar

基础布局组件之Tags

基础布局组件之header

业务组件之table

业务组件之form

业务组件之pagination

开箱即用项目

v0.1.0 已经完成常用基建的项目模板

vite优缺点

缺点：1. 样式修改手动刷新才能生效；