起步
使用vite搭建
yarn
$ yarn create vite-app <project-name> //1有下面的2种等价写法
$ cd <project-name>
$ yarn
$ yarn dev
//1等价于
$ yarn global add create-vite-app
$ cva dropUI
//也等价于
$ npx create-vite-app dropUI //直接使用npx直接执行命令，如果包不存在的话，它也会自动下载（包括初始化npm init）。
npm
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
总结
Vue3与Vue2区别
- 90%的写法完全一致，除了以下几点
- Vue3的Template支持多个根标签
- Vue3有createApp()，而Vue2的是new Vue()
- createApp(组件)，new Vue({template,render})
引入 Vue Router 4
路由器，用于页面切换
安装
$ npm info vue-router versions //查看当前安装的版本
$ yarn add vue-router@4.0.0-beta.3
初始化 vue-router
- 新建 history 对象
- 新建 router 对象
- 引入 TypeScript
- app.use(router)
- 添加 router-view标签
- 添加 router-link标签
开始创建官网
Home.vue
- Topnav：左边是logo，右边是menu
- Banner：文字介绍 + 开始按钮
Doc.vue
- Topnav：同上
- Content：左边是 aside，右边是 main
新的路由
- 路径为 #/ 时：渲染 Home.vue
- 路径为 #/doc 时：渲染 Doc.vue
