1. 什么是Vite?
Vite是一个web开发构建工具。Vite 的竞品是 Webpack，而且按照现在的趋势看，使用率超过 Webpack 也是早晚的事。
Vite 主要提升的是开发的体验，Webpack启动调试环境需要 3 分钟都很常见，Vite大大缩短了这个时间。
Vite开发环境不需要对所有资源打包，Vite将于构建的依赖缓存到node_modules/.vite目录下，它会根据几个源来决定是否需要重新运行预构建,包括 packages.json中的dependencies列表、包管理器的lockfile、可能在vite.config.js相关字段中配置过的。只要三者之一发生改变，才会重新预构建。否则，不进行构建，从而提高了速度。
2. 环境准备
2.1 安装 Node.js
过程是傻瓜式的，直接去Node.js 官网，选择 LTS 版本，也就是稳定版，进行下载和安装即可。
2.2 VS Code
VS Code 里进行 Vue 项目的开发。下载安装： https://code.visualstudio.com/
VS Code 的官方扩展插件 Volar，给 Vue 3 提供了全面的开发支持。访问 Volar 的地址，直接点击 Install，就会启动 VS Code 并且安装。
2.3 VueTools调试工具
Chrome 访问 Vue 3 调试插件的地址（需要梯子） ，可以帮助我们在浏览器里高效的调试页面。
3. Vite创建Vue项目
在命令行窗口里，执行npm create vite@latest，就可以初始化一个VUE项目。
在Project name这一行，输入项目名字，例如：learn-vue3。
在Select a framework这一行，选择Vue。
在Select a variant这一行，选择JavaScript。
% npm create vite@latest
Need to install the following packages:
create-vite@4.3.1
Ok to proceed? (y) y
✔ Project name: … learn-vue3
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript
Scaffolding project in /Users/chunming.liu/Downloads/learn-vue3...
Done. Now run:
cd learn-vue3
npm install
npm run dev
进入到项目learn-vue3目录下，看下项目的骨架。
% cd learn-vue3
(base) chunming.liu@localhost learn-vue3 % tree
.
├── README.md
├── index.html 入口文件
├── package.json 依赖包管理文件，只会锁定大版本，某些依赖包小版本更新后，可能造成依赖结构的改动
├── public 资源文件
│ └── vite.svg
├── src 源码文件夹
│ ├── App.vue 单文件组件
│ ├── assets 静态资源
│ │ └── vue.svg
│ ├── components 通用业务组件
│ │ └── HelloWorld.vue
│ ├── main.js 入口文件
│ └── style.css
└── vite.config.js vite配置文件
在learn-vue3目录下，执行npm install 命令，来进行依赖的安装。依赖安装完成后，会在目录下生成一个node_modules目录以及package-lock.json文件。
node_modules目录是安装的依赖包所在的目录，不要放到git仓库管理。
package-lock.json文件是依赖包管理文件，作用是锁定依赖结构，每次执行 npm install 后生成的 node_modules 目录结构一定是完全相同的，一定要提交到git仓库。
% tree -L 2
.
├── README.md
├── index.html
├── node_modules
│ ├── @babel
│ ├── @esbuild
│ ├── @vitejs
│ ├── @vue
│ ├── csstype
│ ├── esbuild
│ ├── estree-walker
│ ├── fsevents
│ ├── magic-string
│ ├── nanoid
│ ├── picocolors
│ ├── postcss
│ ├── rollup
│ ├── source-map
│ ├── source-map-js
│ ├── sourcemap-codec
│ ├── vite
│ └── vue
├── package-lock.json
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.js
│ └── style.css
└── vite.config.js
然后执行 npm run dev 命令来启动项目，看到如下信息就算是启动成功了。
VITE v4.3.4 ready in 324 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
打开http://localhost:5173/页面，可以看到下面的页面，表示我们的项目创建成功了。
4. 安装路由和数据依赖
Vuex 负责管理数据，vue-router 负责管理路由。learn-vue3目录中使用下面这段代码安装 Vuex 和 vue-router。
% npm install vue-router@next vuex@next
5. 大型工程规范
便于管理，对 src 目录的组织结构进行规划。
(base) chunming.liu@localhost src % tree
.
├── App.vue
├── api # 请求接口
├── assets
│ └── vue.svg
├── components
│ └── HelloWorld.vue
├── main.js
├── pages # 页面模板
├── router # 路由配置
├── store # 状态管理中心
├── style.css
└── utils # 工具库
7 directories, 5 files
6. 多页面
多页面系统，需要引入路由系统
6.1 配置路由
我们进入到 router 文件夹中，新建 index.js设置路由：
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../pages/home.vue"
import About from "../pages/about.vue"
const routes = [
{
path: "/", //路由地址
name: "Home", //路由名
meta: {
title: '首页'
},
component: Home //组件名
},
{
path: "/redirect", //路由地址
redirect: "/" //重定向
},
{
path: "/about",
name: "About",
componen: About
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
}
)
//导出router对象实例
export default router
- 从vue-router中引入两个函数：createRouter 和 createWebHashHistory。
- createRouter创建路由实例，第一个参数history，这里使用createWebHashHistory，表示内部使用hash模式路由，也就url上会通过#区分。第二个参数是路由配置。
- routes是个数组，是系统的所有页面路径对应的组件。每项由path、name和component组成。path表示页面路径，name表示路由名称，component表示组件。重定向的路由通过redirect指定。
- 导出router对象实例，后面绑定到Vue实例上。
上面的代码里，我们引入两个组件 home和about，根据不同的访问地址/ 和/about 去渲染不同的组件，最后返回 router 。另外，当让访问空地址的时候“”，会重定向到/页面。
这里用到了Home组件和About组件，我们到pages目录下，新建这两个文件分别是home.vue和ahout.vue。
<template>
<h1>这是首页</h1>
</template>
和
<template>
<h1>这是关于页面</h1>
</template>
6.2 加载路由
要想使路由生效，需要在 main.js 中，使用use加载 router 的配置：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
createApp(App)
.use(router)
.mount('#app')
去 App.vue 中，删掉 template 之前的代码，加入如下内容：
<template>
<div>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>|
<router-link to="/redirect">重定向</router-link>
</div>
<router-view></router-view>
</template>
router-link和router-view是vue-router 注册的全局组件，我们可以直接用。
router-link组件负责跳转，通过to参数来指定跳转目标。
router-view组件用来渲染路由匹配的组件。可以放在任何地方，从而实现负责的页面布局。
浏览器中打开http://localhost:5173/，就会看到下图的页面，点击“关于”和“首页”都会有页面切换的效果。
