Vue3-01day

1. 项目启动：搭建Vue3工程化项目
   安装 node.js（查看版本 是否安装成功）
   创建一个 vite 的初始化项目 npm init @vitejs/app
   Project name 输入项目的名字
   Select a farmework 选择框架
   Select a variant 选择
   创建成功
   项目骨架

.
├── README.md
├── index.html           入口文件
├── package.json
├── public               资源文件
│   └── favicon.ico
├── src                  源码
│   ├── App.vue          单文件组件
│   ├── assets
│   │   └── logo.png
│   ├── components   
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置文件

之后，在项目文件下执行 npm 来进行依赖的安装，然后 npm run dev 启动项目。

1. 我们所有工程化体系都是基于 Node.js 生态；我们使用 VS Code+Volar 编辑器 + 语法提示工具作为上层开发工具；使用 Vite 作为工程化工具；使用 Chrome 进行调试，这些都是 Vue 3 工程化体系的必备工具。
2. 我们开发的项目是多页面的，所以 vue-router 和 Vuex 也成为了必选项，就像一个团队需要人员配比，Vue 负责核心，Vuex 负责管理数据，vue-router 负责管理路由。
   npm install vue-router@next vuex@next
3. 规范 src 目录的组织结构

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数