跟着A总搭后台 —— 《Vue.js 3.0企业级管理后台开发实战 - 基于Element Plus》
1. 搭建项目。【这里的构建基于Vite工具。node：v18.7.0，npm：8.15.0】
运行npm init vue@latest（如果提示需要安装 create-vue 则斩钉截铁的按下y吧~）
（Vue3 + TypeScript + Vue Router + Pinia + Eslint + Prettier，集大成者😏） 选择的动作指令如下：
2. 设置一个存放项目的代码仓库 —— 这里以码云为例
创建一个新的仓库，根据码云里的提示内容步骤来，这里就不多赘述了。
3. 配置代码格式化规则
在第一点创建项目的时候，选择了安装ESLint和Prettier，所以创建的初始目录中存在有工具为我们创建好的.eslintrc.cjs和.prettierrc.json。我们在此基础上配置一些自定义规则。
> .prettierrc.json <
{
"useTabs": false, // 是否使用tab缩进, 认false
"tabWidth": 2, // tab缩进大小, 默认为2
"singleQuote": true, // 使用单引号, 默认false
"trailingComma": "none", // 行尾逗号, 默认none. 可选 none|es5|all (es5 包括es5中的数组、对象; all 包括函数对象等所有可选)
"bracketSpacing": true, // 对象中的空格, 默认true ( true: { foo: bar } 、false: {foo: bar} )
"semi": false, // 使用分号，默认true
"htmlWhitespaceSensitivity": "ignore" // 处理闭合标签最后的 > 被另起一行
}
这里使用编辑器VSCode开发，安装Prettier - Code formatter插件，配合插件饮用格式化效果更香~
4. 配置Sass文件
安装Sass依赖：
【目前项目安装的版本"sass": "^1.56.1", "sass-loader": "^13.2.0"】
npm install -D sass sass-loader
第一步：在src下新建styles文件夹，并建立main.scss作为全局项目的样式文件主入口
> vite.config.ts <
...
export default defineConfig({
...
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "./src/styles/main.scss";`
}
}
}
})
🖊 通过配置
vite.config.ts的原因是，虽然单单从main.ts引入样式文件也可实现样式全局使用，但是如果涉及到变量等内容，其他地方使用该变量是无法生效的。
第二步：在src/App.vue中设置lang="scss"且包含的样式中需要存在有内容。不然会导致使用样式不生效！
> src/App.vue <
...
<style scoped lang="scss">
... // 这里需要有任何内容。一般可以写 #app{} 代码块
</style>
// 如下
<style scoped lang="scss">
#app{}
</style>
🖊 样式生效的条件
方式一：在
main.js(ts)引入一个其他scss文件；方式二：在
.vue文件中使用<style lang="scss"><style>，并且里面有内容；则
scss.additionalData配置的全局scss文件就可以正确引入了。需要注意的是，如果只是在子组件文件中配置，则只会作用在对应的某个子组件中。所以建议在
src/App.vue中设置lang="scss"且包含的样式中需要存在有内容，则可以作用到整个项目！
5. 重置浏览器默认样式
去Normalize.css中下载文件后，在main.js(ts)中引入
> main.ts <
...
// 重置浏览器默认样式
import './styles/normalize.css'
...
6. 导入Element Plus组件库 （Element Plus官网）
(1) 安装：npm install element-plus --save
(2) 采用按需自动导入的方式
