从搭建UI组件库了解Vue3

起步

使用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

1. 新建 history 对象
2. 新建 router 对象
3. 引入 TypeScript
4. app.use(router)
5. 添加 router-view标签
6. 添加 router-link标签

开始创建官网

Home.vue

• Topnav：左边是logo，右边是menu
• Banner：文字介绍 + 开始按钮

Doc.vue

• Topnav：同上
• Content：左边是 aside，右边是 main

新的路由

• 路径为 #/ 时：渲染 Home.vue
• 路径为 #/doc 时：渲染 Doc.vue