由于 vue3.2 版本的发布，<script setup> 的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢，其他的更新[1]请自行了解。到目前为止，我认为 vue3 已经完全可以用于生产环境。在此将我的开发体验，总结至此，分享给大家。
我认为前端架构核心工作是定制一套适合当前业务需求的解决方案，从而降低需求的增加而带来的技术实现的复杂度。下面我将从 16 个方向，逐渐带领大家搭建一套属于你自己的脚手架，制定一套合理的解决方案，为项目打下良好的基础，与同伴形成合适的开发习惯。
由于篇幅问题，以讲解实现思路为主，希望大家友善发言，共同进步！
1.搭建脚手架 前端开发博客
使用 vue-cli 或 vite ，通过一系列的配置，初始化一个开发模板，无需从零开始搭建开发环境，可以有效的提升开发效率，相信也是大多数开发者接手一个新项目所使用的一种方式。尽管官方提供的脚手架已经足够优秀，但未必是真正符合我们自己团队的使用习惯，所以从官方的基础上，开发一款属于我们自己的脚手架，能更多的提升开发效率。
减少重复的初始化工作，不需要再复制其他类似的项目删除无关代码，或从零搭建一个项目。
可以根据团队需求，使用简单的交互操作生成相应的目录结构和文件。
统一团队的开发习惯、代码风格，保证构建结果的一致性。
完整的使用文档，降低新人上手、开发和后期维护成本。
提到构建前端工程化中脚手架，相信大家已经看过不少文章，几年前我也曾经写过一篇关于脚手架构建的文章[2]，随便搜一下关键词可以看到很多相关的文章，在这里不做太多的介绍，主要讲一些这些文章中很少提到的如何根据选项生成文件。
还可以看看：基于Vite2+Vue3的项目复盘总结
说实话我也不知道大佬们是怎么根据各种配置编译成相应的文件，这块希望大家踊跃发言，寻求一种更佳高效简洁的方式。在这里跟大家分享一下我的方案：
交互方面，搭建过脚手架的同学一定知道 inquirer[3]，这个库可以很方便的通过交互式操作获取到我们选择的一些自定义配置参数。那么问题来了，如何通过这些配置相应的创建对应的文件呢？
这里我推荐使用 EJS[4] + Prettier[5] 生成代码，通过 fs-extra[6] 写入最终的文件。
EJS 是一款 JavaScript 模板引擎，我们可以通过传入参数，生成对应的代码串，例如创建一个 package.ejs 用来生成 package.json 中，如果我们选择使用了 scss 作为 CSS 预处理器，然后将 sass 和 stylelint-scss 作为项目的安装依赖：
<% if (precss === ‘scss’) { -%>
“sass”: “1.26.5”,
“stylelint-scss”: “^3.20.1”,
<% } -%>
模板引擎可以帮你通过参数生成代码，它并不会限制你生成任何类型的代码文件，因为我们生成的是纯代码，最后通过读取 .ejs 文件对应生成相应的类型文件即可。
Prettier 是一款代码格式化工具，相信大家对它并不陌生。使用 EJS 生成的目的还是给开发人员阅读和编辑，所以生成的代码应该符合最终的格式要求，因为后续我们会为脚手架添加 ESLint 和 StyleLint 等工具，刚刚创建的项目里面一堆红线报错可是十分不友好的。
import prettier = require(“prettier”);
prettier.format(code, { parser: ‘json’ }))
parser 是 prettier 的解析器，常见的 typescript、css、less、json 等文件都可以进行格式化。
2.基于 vite 的搭建基础模板
最早搭建 vue3 脚手架的时候，我选择的用 vue/cli 搭建，因为生态不健全，有些基于 webpack 的功能无法使用，但现在 vite 生态已经比较完善了，所以重构脚手架，由 webpack 转向 vite，这一步极大的提升了开发体验。
真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲 详情关注公中号【编程进阶路】
npm init vite@latest
yarn create vite
pnpm create vite
然后按照提示操作即可，vite 提供的选项很少，只有 vue 或 vue + ts，不像 vue/cli 提供那么多的配置方式，所以剩下的东西需要我们手动配置。
当然 vite 也提供了很多模板，但是我认为做加法比做减法更加容易，在众多的模板中很难找到适合我们自己的。
这里先简单了解几个好用的 vite 插件：
unplugin-vue-components[7]：组件的按需自动导入。
vite-plugin-svg-icons[8]：用于生成 svg 雪碧图。
vite-plugin-compression[9]：使用 gzip 或者 brotli 来压缩资源。
为什么只推荐这么几个插件？因为 vite 对许多 webpack 需要安装的 loader 或 plugin 都有着天生的支持，比如 less、sass、typescript，后续会在相应的章节说明用法。
3.使用 Typescript
vue2.x 版本对 TypeScript 的支持是硬伤 ，而 TypeScript 对大型项目的保障能力是被普遍认可的。这一点在 vue3.x 版本中得到了非常友好的支持。
Vite 天然支持引入 .ts 文件。
这里对 tsconfig.json 做了一些修改：
{
“compilerOptions”: {
“types”: [“vite/client”],
“baseUrl”: “src”,
“paths”: {
“@/“: [”./ ”]
}
},
“exclude”: [“node_modules”]
}
在初期使用 typeScript 的时候，很多人都很喜欢使用 any 类型，把 typeScript 写成了 anyScript ，虽然使用起来很方便，但是这就失去了 typeScript 的类型检查意义了，当然写类型的习惯是需要慢慢去养成的，不用急于一时。
4.配置环境变量
vite 提供了两种模式：具有开发服务器的开发模式（development）和生产模式（production）。
这里我们可以建立 4 个 .env 文件，一个通用配置和三种环境：开发、测试、生产。
NODE_ENV=development # 开发模式
NODE_ENV=production # 生产模式
.env 通用配置，我个人喜欢把他当作项目的配置文件，例如项目的 title，此文件不对应任何模式。
.env.development 开发环境，使用 development 模式。
.env.staging 测试环境，因为要部署到测试服务器，或本地使用 serve 命令预览，所以使用 production 模式。
.env.production 生产环境，因为要部署到测试服务器，或本地使用 serve 命令预览，所以使用 production 模式。
package.json 内 script 需要增加 staging 命令
“script”: {
“build”: “vue-tsc --noEmit && vite build”,
“staging”: “vue-tsc --noEmit && vite build --mode staging”,
“serve”: “vite preview --host”
}
推荐使用以下常见的三个变量：
接口请求地址。
通常后端会区分三种环境，部署在不同的地址下。
静态资源地址。
静态资源我是不建议你直接放在项目中，这会导致项目仓库变得巨大。
本地开发和测试环境我会选在使用本地搭建的静态资源服务器，你可以找后端运维的同学帮你搭建，或者你使用 http-server 在本地启动一个服务器也可以。生产环境建议上传至 OSS。
构建资源公共路径。
这个与 vue/cli 中的 publicPath 同理，有的时候你构建的项目并不是存放在跟路径下，例如 http://ip:port/{项目名}。
如果你配置了 VITE_APP_STATIC_URL 静态资源环境变量，那么你需要封装以下两个东西：
根据环境返回实际的资源地址函数。
方便使用的静态资源组件。
baseStaticUrl.ts
// 处理静态资源链接
export default function baseStaticUrl(src = ‘’) {
const { VITE_APP_STATIC_URL } = import.meta.env;
if (src) {
return ${VITE_APP_STATIC_URL}${src};
}
return VITE_APP_STATIC_URL as string;
}
静态资源组件
静态资源主要有图片、音频和视频三种常见的形式。
SVG 的图标组件svg 图标比较小，而且都是可读的 xml 文本，所以我们把它直接放在项目中即可，通过 vite-plugin-svg-icons 插件，实现自动引入 svg 图标。
配置 vite.config.ts：
plugins: [
viteSvgIcons({
iconDirs: [resolve(process.cwd(), ‘src/assets/icons’)],
symbolId: ‘icon-[dir]-[name]’,
}),
]
封装一个 vue 组件：
首先将下载的 .svg 图标放入 @/assets/icons 文件夹下
5.按需自动引入组件
unplugin-vue-components[10] 是一款非常强大的插件（极力推荐），核心功能就是帮助你自动按需引入组件，Tree-shakable，只注册你使用的组件。这里说一下他的两个核心使用方式和配置方式。
此插件不仅支持 vue3，同时也支持 vue2，并且支持 Vite、Webpack、Vue CLI、Rollup。
安装：
npm i unplugin-vue-components -D
配置：
// vite.config.ts
import Components from ‘unplugin-vue-components/vite’
export default defineConfig({
plugins: [
Components({ /* options */ }),
],
})
这里的 options 可以配置一些选项，后面提到的组件库注册会使用到。
我们通常将全局的组件封装在 @/src/components 中，然后通过 app.component() 注册全局组件。使用此插件后，无需手写注册，直接在模板中使用组件即可：
这里引入官方的示例：
自动编译为：
在使用组件库时，常规组件我们也会注册到全局，如果使用局部注册由于页面中会使用到多个组件，会非常麻烦，所以这个功能绝佳，例如我们使用 ant-design-vue 组件库。
直接在模板中使用即可，无需手动注册或局部引用：
按钮
当然，你还需要在 vite 中引入它的解析器：
import Components from ‘unplugin-vue-components/vite’
import { AntDesignVueResolver } from ‘unplugin-vue-components/resolvers’
export default defineConfig({
plugins: [
Components({
resolvers: [
AntDesignVueResolver(),
]
})
],
})
目前支持的解析器，根据你的喜好去选择：
Ant Design Vue[11]
Element Plus[12]
Element UI[13]
Headless UI[14]
IDux[15]
Naive UI[16]
Prime Vue[17]
Vant[18]
VEUI[19]
Varlet UI[20]
View UI[21]
Vuetify[22]
VueUse Components[23]
Quasar[24]
6.样式
项目中最好使用通用样式，可以创建 src/styles 目录存放，这里推荐一些分类：
styles
├── antd # 组件库样式覆盖，命名自取，这里以 ant design 为例
├── color.less # 颜色
├── index.less # 入口
├── global.less # 公共类
├── transition.less # 动画相关
└── variable.less # 变量
相信用过 normalize[25] 的同学不在少数，它可以重置 css 样式，使各浏览器效果保持一致。后面的章节会提到 tailwind.css，它内置了预设样式重置的功能，与 normalize 还是有一定的区别，有兴趣的同学可以了解一下[26]。
虽然 vite 原生支持 less/sass/scss/stylus，但是你必须手动安装他们的预处理器依赖，例如：
npm install -D less
如何选择预处理器？
推荐使用你是所使用的组件库的样式语言，因为 css 预处理器学会一种后，入手其他几乎没有学习成本。
没有加 scoped 属性，会编译成全局样式，造成全局污染。
有时我们可能想明确地制定一个针对子组件的规则。
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。
7.布局
页面整体布局是一个产品最外层的框架结构，往往会包含导航、页脚、侧边栏等。在页面之中，也有很多区块的布局结构。在真实项目中，页面布局通常统领整个应用的界面，有非常重要的作用，所以单独拆分出来也是非常有必要的。
在脚手架中，所有的通用布局组件都应该放在 src/layouts 中，这种封装比较简单，这里就不贴代码了，大家按照自己实际情况自行发挥，在此仅提供一下封装思路。
BasicLayout
基础页面布局，包含了头部导航，侧边栏等。
BlankLayout
空白的布局。
RouteLayout
如果你的项目在路由切换中需要对某些二级页面进行缓存，那么推荐你创建一个 RouteLayout，通过路由 meta 中的配置，返回 router-view 或者使用 keep-alive 包裹的 router-view。
UserLayout
用于用户登录注册等页面抽离出来。
PageLayout
基础布局，包含了面包屑等信息，内含 slot。
8.集成 Tailwind.css
Tailwind.css[27] 在我第一次看到它的时候，内心是比较反感的，但实际上手之后又觉得真香。从 vue2 项目中，我已经引入了 tailwind，整体的开发结果就是，基本很少再使用 <style> 标签去转本定义一些 class 和样式，毕竟起名字这种事，一个是涉及到规范，一个是涉及到英语。如果你选择 tailwind，CSS 预处理器的作用就会显得微乎其微，因为你无需再自定定义各种变量和 mixins。
总体来说，学习成本并不高，花上两个小时足够上手，记住不用死记硬背那些类名。
很多人总是说样式要与 HTML 分离，现在为什么又要提倡 tailwind 这种与 HTML 紧密结合的工具？这是因为现在使用 vue 这类框架已经高度组件化，样式分离是为了方便复用和维护，但在组件化面前样式分离只能是降低开发效率。
下面介绍一下 tailwind 提供了哪些提升效率的功能：
提供了大量的功能类，极大的提高了可维护性。
响应式设计，各种设备一把梭。
悬停、焦点和其它状态。
深色模式。
支持配置，例如颜色方面很难做到跟你的设计师统一。
不用为起名字而纠结???
如果你的环境支持 postcss8（ vue/cli 构建的 vue2 项目是 postcss7 ），那么 JIT 模式直接带你起飞。
超快的构建速度。
支持变体，你甚至可以这么写 sm:hover:active:disabled:opacity-75。
支持任意样式，例如 md:top-[-113px]。
开发和生产环境结果是一致的，（我在 vue2 项目中就遇到过组件库构建结果不一致的问题）。
如果你使用 vscode 那你一定要安装 Tailwind CSS IntelliSense[28] 插件，它可以自动补全类名，显著降低学习成本。
使用默认配置，未压缩是 3739.4kB ，Gzip压缩 是 293.9kB，Brotli压缩 是 73.2kB。这似乎看起来很大，这是因为 tailwind 提供了成千上万的功能类，其中绝大部分你不会使用到。
当构建生产时，你应该使用 purge 选项来 tree-shake 优化未使用的样式，并优化您的最终构建大小当使用 Tailwind 删除未使用的样式时，很难最终得到超过 10kb 的压缩 CSS。
还有一点，Atom CSS 极大的提升了样式的复用程度，从而直接降低了构建体积。
9.vuex 替代方案 pinia
由于 vuex 4 对 typescript 的支持让人感到难过，所以状态管理弃用了 vuex 而采取了 pinia[29]。
忘记在哪看到，尤大好像说 pinia[30] 可能会代替 vuex，所以请放心使用。
Pinia 的 API 设计非常接近 Vuex 5 的提案[31]。（作者是 Vue 核心团队成员）
无需像 Vuex 4 自定义复杂的类型来支持 typescript，天生具备完美的类型推断。
模块化设计，你引入的每一个 store 在打包时都可以自动拆分他们。
无嵌套结构，但你可以在任意的 store 之间交叉组合使用。
Pinia 与 Vue devtools 挂钩，不会影响 Vue 3 开发体验。
下面简单的介绍一下如何使用 Pinia，并对比 vuex 有哪些区别与注意事项，具体请参考官方文档[32]。
Pinia 已经内置在脚手架中，并且与 vue 已经做好了关联，你可以在任何位置创建一个 store：
import { defineStore } from ‘pinia’
export const useUserStore = defineStore({
id: ‘user’,
state: () =>({}),
getters: {},
actions: {}
})
这与 Vuex 有很大不同，它是标准的 Javascript 模块导出，这种方式也让开发人员和你的 IDE 更加清楚 store 来自哪里。
Pinia 与 Vuex 的区别：
id 是必要的，它将所使用 store 连接到 devtools。
创建方式：new Vuex.Store(...)(vuex3)，createStore(...)(vuex4)。
对比于 vuex3 ，state 现在是一个函数返回对象 。
没有 mutations ，不用担心，state 的变化依然记录在 devtools 中。
创建好 store 之后，可以在 state 中创建一些属性了：
state: () => ({ name: ‘codexu’, age: 18 })
将 store 中的 state 属性设置为一个函数，该函数返回一个包含不同状态值的对象，这与我们在组件中定义数据的方式非常相似。
在模板中使用 store：
现在我们想从 store 中获取到 name 的状态，我们只需要使用以下的方式即可：
{{userStore.name}}
const userStore = useUserStore()
return { userStore }
注意这里并不需要 userStore.state.name。
虽然上面的写法很舒适，但是你一定不要用解构的方式去提取它内部的值，这样做的话，会失去它的响应式：
const { name, email } = useUserStore()
Pinia 中的 getter 与 Vuex 中的 getter 、组件中的计算属性具有相同的功能，传统的函数声明使用 this 代替了 state 的传参方法，但箭头函数还是要使用函数的第一个参数来获取 state ，因为箭头函数处理 this 的作用范围：
getters: {
nameLength() {
return this.name.length
},
nameLength: state => state.name.length,
nameLength: ()=> this.name.length ❌
}
这里与 Vuex 有极大的不同，Pinia 仅提供了一种方法来定义如何更改状态的规则，放弃 mutations 只依靠 Actions ，这是一项重大的改变。
Pinia 让 Actions 更加的灵活：
actions: {
async insertPost(data){
await doAjaxRequest(data);
this.name = ‘…’;
}
}
脚手架已内置下面的代码，这将添加 devtools 支持：
import { createPinia, PiniaPlugin } from ‘pinia’
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
