创建
pnpm create vite安装提示选择vue+ts模版
ElementUI
安装
pnpm install element-plus
按需导入
安装依赖
pnpm install -D unplugin-vue-components unplugin-auto-import
vite中引入
反馈组件样式单独引入
@import "element-plus/theme-chalk/el-loading.css";
@import "element-plus/theme-chalk/el-message.css";
@import "element-plus/theme-chalk/el-notification.css";
@import "element-plus/theme-chalk/el-message-box.css";
别名
安装（path和__dirname类型错误）
pnpm install @types/node
tsconfig添加paths项（智能提示）
配置
vue-router
安装
pnpm install vue-router@4
定义
注册
pinia
作为vue3配套的状态管理工具，pinia应该是首选的，不过我这是新项目，且比较明确用不到，就不安装了
可参考这篇文章
环境变量
设置
使用
axios
安装
npm install axios
配置
封装
使用
css
less
vite内置了less支持，只需要install它：pnpm i less -D
PostCSS
PostCSS是一款使用JavaScript插件对CSS实现转换的工具，可以使用它进行css操作，比如为兼容性差的属性添加浏览器前缀等“脏活”、“累活”，vite中也内置进行了支持，只需要安装对应的处理插件即可
postcss-import：智能寻址
postcss-preset-env：浏览器兼容前缀
代码规范
eslint
安装
pnpm install eslint
创建配置文件
npx eslint --init
修改配置文件（更多规则）
配置vscode
安装eslint插件，找到其扩展设置，选择在setting.json中编辑
配置如下
vite-plugin
安装
pnpm i vite-plugin-eslint -D
使用
效果
跨级通信
vue3已经移除了eventbus，需要借助第三方库，我这里找了一个，虽然其核心能力是用来操作localStorage的，但是其提供了：加解密、批量操作、过期时间、命名空间、数据变化侦听等特性，其中的watch接口和postMessage接口即可用于实现跨级通信
为什么要用
说到底是懒，如果不跨级
则需要在子组件进行注册
然后做出抛事件的动作
然后在父组件进行监听
我的页面比较复杂，需要跨好几个组件做通信，因此，上边的步骤需要在每一个组件中定义并相互传递，如下
使用后，只需要在d组件抛出消息
然后在a组件监听即可
其实，个人觉得，最好用的不是这个功能，而是其实现了类似“离线消息”的功能，如果消息发送的组件不在页面中，则该库会将消息滞留，并在对应组件挂载时触发
生产构建
生产构建每个人的可能都不一样，但一般来说，都要根据发布后的位置去改动base选项，但是由于vite中的vite.config.ts中不支持process.env.NODE_ENV这样的方式,故一般需要定义环境文件
然后在vite.config.ts中使用loadEnv进行加载
cjs文件的加载
按照网上的说法，基本都是利用commonjs和transform-reauire插件来实现，但是我试了，是无效的，最终尝试后，发下使用动态import是可以的
其他相关文章
网友评论