ps: 我node v18.17.0
使用脚手架创建项目
1.安装脚手架
2.进入新创建的文件夹下
3.执行init命令
imooc-cli init
选择项目->「慕课乐高」标准项目模板
4.运行启动项目
5.查看项目目录 d.ts文件 ts不知道.vue后缀名的文件，为了导入.vue文件不报错。
ESLint（项目模版中有配置）
安装第三方组件库
安装ant-design-vue组件库。
npm install ant-design-vue@next --save
给乐高首页、详情页、编辑页布局。
想安装scss没成功。
发现这个vue3项目没有webpack.config.js文件。因为创建时使用了Vue CLI的默认配置，webpack文件都被隐藏起来了。
添加配置Vue-Router
SPA
切换菜单，不刷新还能改变地址栏的url。(参考History的pushState())
安装vue-router V4.0
npm install vue-router@next --save
创建routes/index.ts文件。
中间content的区域用<router-view></router-view>。
使用Vue Router钩子函数获取路由信息和跳转
使用<router-link>跳转。
url的结构。
url跳转后获取传参用useRoute。
比如登录成功后自动跳转用useRouter。
使用Vue Router元数据和嵌套路由解决不同模版结构
判断页面需不需要header。 1.使用meta属性来判断。
2.多级路由嵌套。（这个还没写）
状态管理
安装Vuex和基本使用（文档上有）
Vuex结合整个应用
创建store/index.ts:
// 声明两个interface UserProps和TemplateProps,以及GlobalDataProps
// 为什么要写这么多interface???
// 造6条假数据
在main.ts文件中引用。
在TemplateList的组件中使用store。还有结合ts的范型一起使用。
以及一些ts的写法。
type: Array as PropType<TemplateProps[]>
