1. 全局安装create-vite-app
yarn global add create-vite-app@1.18.0
或者
npm i -g create-vite-app@1.18.0
安装完成可以看到有两个命令可以使用：
create-vite-app-
cva是第一个命令的缩写
2. 创建项目目录
cva project-name
或者
create-vite-app project-name
执行完会有这三个命令，依次执行就可以了。
执行完后，我们的项目就可以在
http://localhost:3000/预览了。
预览效果
并且在点击页面按钮时，这个数字会不停的增加。
小知识点
vite文档给出的命令是
npm init vite-app <project-name>
yarn create vite-app <project-name>
等价于
全局安装 create-vite-app然后
cva <project-name>
等价于
npx create-vite-aapp <project-name>
即npx会帮你全局安装用到的包。
那么我们已经构建好了一个VUE 3.0的项目，下一步可以写代码了。
我们可以看到项目的基本架构如图：
3. Vue2和Vue3对比
- 90%的写法完全一致，除了一下几点。
- Vue3的
Template支持多个根标签，Vue2不支持
vue3的template
vue2的template
-
Vue3有
createApp()，而Vue2的是new Vue()
vue3
vue2 Vue3:
createApp(组件)，传的是个组件；Vue2:new Vue({template, render})，传的是个对象。
4. 引入vue-router4
vue-router4是专门和vue3搭配的路由。
使用npm info vue-router versions
查看所有vue-router的版本。
我们可以看到，最新的版本是4.0.6。
那么我们在项目中打开新终端，输入
yarn add vue-router@4.0.6。
当我们看到版本号出现后，便是安装成功了。
5. 初始化vue-router
- 新建history对象
- 新建router对象
-
app.use(router)
需要注意几点：
- main.js改名为main.ts，同时也要修改index.html中的引用，这时候会出现很多报错
- 引入.vue的文件报错，找不到.vue相对应的模块。
原因是ts不能识别后缀为.vue的文件，只能识别后缀为.ts的文件。
我们可以搜索vue3 can not find module，
解决办法可以参考这篇文档：vue3报错解决
解决办法：
在根目录下创建一个后缀为.d.ts的文件，
将下面的代码写进去就解决了，如果还是报错，可以把编辑器重启一下。
declare module '*.vue' {
import { ComponentOptions } from 'vue'
const componentOptions: ComponentOptions
export default componentOptions
}
-
createRouter报错
当createRouter没有传参数时，ts会提醒你报错，我们可以查看到createRouter的源码，将鼠标点击到createRouter上面，按F12进入
我们可以看到createRouter需要传一个RouterOptions的对象，那么这个对象是什么，我们可以继续查看下一层，从RouterOptions按F12进入
我们可以得出，主要是需要两个量，一个是history，这个我们已经创建好了，一个是routes，很明显这是个数组。
- 添加<router-view>
- 添加<router-link>
那么我们可以看到效果，点击<router-link>标签内容可以切换蓝色区域<router-view>的页面。
