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

1. 从vue-router中引入两个函数：createRouter 和 createWebHashHistory。
2. createRouter创建路由实例，第一个参数history，这里使用createWebHashHistory，表示内部使用hash模式路由，也就url上会通过#区分。第二个参数是路由配置。
3. routes是个数组，是系统的所有页面路径对应的组件。每项由path、name和component组成。path表示页面路径，name表示路由名称，component表示组件。重定向的路由通过redirect指定。
4. 导出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/，就会看到下图的页面，点击“关于”和“首页”都会有页面切换的效果。