V3

Vite 创建项目

创建项目

小知识

• vite 文档给出的命令是

  1. npm i vite-app 项目名

  2. yarn create vite-app 项目名

• 等价于

  1. 全局安装 create-vite-app 然后

  2. cva 项目名

// 全局安装 vite
npm i -g create-vite-app@1.18
// 创建项目文件夹
cva 项目名 // or create-vite-app 项目名

初始化项目

- node-modules
- src
  - assets
  - components
  - main.js
  - App.vue
  - index.css
- index.html // 项目的首页
- package.json

Vue2 与 Vue3 的区别

• 90%的写法完全一致

• Vue3 的 Template 支持多个根标签, Vue2不支持

• Vue3 的主函数是 createApp(), Vue2 是 new Vue()

• createApp(组件), new Vue({template, render})

安装并初始化 vue-router4

查看 vue-router 的版本

npm info vue-router versions

安装 vue-router4

npm i vue-router@4.0.0-beta.3

初始化 vue-router

• 新建 history 对象

• 新建 router 对象

• 报错：找不到模块 xxx.vue

  1. 出现原因：TS只能理解 .ts 文件，无法理解 .vue文件

  2. 解决办法：

     • 搜索 Vue3 can not find module

     • 创建 xxx.d.ts，告诉 TS 如何理解 .vue 文件

• app.use(router)

• 添加 router-view 组件展示

• 添加 router-link 组件跳转

创建页面