vue3脚手架创建项目后，搭建框架具体要做啥？

一、一些核心概念

1、组合式函数的概念

基于逻辑函数拆分业务是指把同一个组件中独立的业务代码通过函数做封装处理，提升代码的可维护性

组合式函数的意思，把独立的逻辑代码分离出去，放在compositions文件夹里单独进行维护，具体使用的场景再导入，直接使用其数据const {nav_name,categoryData } = useCategory()

2、组合式函数的具体实现

1．按照业务声明以｀use＇打头的逻辑函数
2．把独立的业务逻辑封装到各个函数内部
3．函数内部把组件中需要用到的数据或者方法return出去
4．在组件中调用函数把数据或者方法组合回来使用

二、创建一个项目的流程, 搭建框架步骤如下:

1. 使用脚手架create-vue搭建vue3项目
   1、npm init vue@latest 初始化项目并精细化配置
   2、npm install => npm run format => npm run dev
   3、src下新增几个文件夹, 如assets/utils/apis/components/directive等
   4、准备好reset.css文件,以及一些常用样式的css文件
   5、git初始化，并提交当前操作目录

2. 一些vs插件的安装与配置, 让敲码环境更顺遂
   1、设置路径别名自动联想
   2、安装错误提示，以及格式化代码的插件，以及eslint错误提示

3. element-plus组件库 并按官网配置成自动按需加载导入的模式

4. 更改element-plus这个UI库的主题色，主题色个性化定制：
   1、安装sass
   2、准备好一份更改好的scss文件
   3、在config.js里进行配置,进行覆盖

5. axios的基础封装与使用

6. 梳理项目页面结构，设置页面的一级路由和二级路由结构

7. 引入初始化样式 以及 图片字体等静态资源

8. scss文件自动按需导入
   如果定义了一些全局的变量，不想在main.js里全局导入，也不想在使用到的文件里导入, 可以配置

9. 项目使用的字体图标的引入 (阿里的iconfont图标库)
   方法1、下载成图片，直接使用
   方法2、Unicode的方式
   方法3、添加你的项目，使用在线地址，再本地线上引入

10. 代碼自动格式化，使用的編輯器是vs code
    步骤1：先安装扩展应用程序：Prettier - Code formatter，并重启项目
    步骤2：在根目录的.prettierrc.json文件单独配置本项目的代码格式规则
    步骤3：打开编辑器的设置，搜索save指令，勾选Editor: Format On Save

...搭建好项目骨架后,接下来就可以愉快敲码了~