阅读 671

从搭建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
文章分类
前端
文章标签