vue3+vite3项目初始化

创建

    pnpm create vite安装提示选择vue+ts模版

统一npm包管理器

    在package.json下新增preinstall和项目启动前添加npm-only-allow，设置yarn作为当前项目的管理版本

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是可以的   

---

其他相关文章

    vue2项目初始化

    umijs项目初始化