构建VUE 3.0项目

1. 全局安装create-vite-app

yarn global add create-vite-app@1.18.0

或者

npm i -g create-vite-app@1.18.0

安装完成可以看到有两个命令可以使用：

1. create-vite-app
2. cva 是第一个命令的缩写

2. 创建项目目录

cva project-name

或者

create-vite-app project-name

预览效果

小知识点
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%的写法完全一致，除了一下几点。

1. Vue3的Template支持多个根标签，Vue2不支持
   
   vue3的template
   
   
   vue2的template

2. Vue3有createApp()，而Vue2的是new Vue()
   

   vue3
   
   
   vue2

3. Vue3: createApp(组件)，传的是个组件；Vue2: new Vue({template, render})，传的是个对象。

4. 引入vue-router4

vue-router4是专门和vue3搭配的路由。
使用npm info vue-router versions
查看所有vue-router的版本。

5. 初始化vue-router

• 新建history对象
• 新建router对象

• app.use(router)

  
  

需要注意几点：

1. main.js改名为main.ts，同时也要修改index.html中的引用，这时候会出现很多报错
2. 引入.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
}

3. createRouter报错
   当createRouter没有传参数时，ts会提醒你报错，我们可以查看到createRouter的源码，将鼠标点击到createRouter上面，按F12进入

   
   
   
   

   我们可以看到createRouter需要传一个RouterOptions的对象，那么这个对象是什么，我们可以继续查看下一层，从RouterOptions按F12进入

   
   
   
   我们可以得出，主要是需要两个量，一个是history，这个我们已经创建好了，一个是routes，很明显这是个数组。
   

• 添加<router-view>
• 添加<router-link>
  
  
  那么我们可以看到效果，点击<router-link>标签内容可以切换蓝色区域<router-view>的页面。