vite 初体验

1.创建项目：

同常见的开发工具一样，vite 提供了用 npm 或者 yarn 一建生成项目结构的方式，使用 yarn 在终端执行

yarn global add create-vite-app@1.18.0//安装 vite 
cva demo-ui//创建一个demo-ui项目
cd demo-ui//进入项目
yarn//运行
yarn dev//启动

即可初始化一个 vite 项目（默认应用模板为 vue3.x），生成的项目结构十分简洁

|____node_modules
|____App.vue // 应用入口
|____index.html // 页面入口
|____vite.config.js // 配置文件
|____package.json

2.初始化路由

npm info vue-router version//先查看路由版本
yarn add vue-router@4.0.0-beta.3//安装最新版本的路由

2.1全局安装vue-router后，在main.ts这个入口文件里面创建 history和router

import {createRouter, createWebHashHistory} from 'vue-router';
const history = createWebHashHistory()
export const router = createRouter({
  history: history,
  routes: [
    {path: '/', component: Home},
    {path: '/doc', component: Doc,children:[
        {path:'switch',component:SwitchDome},
        {path:'button',component:ButtonDome},
        {path:'dialog',component:DialogDome},
        {path:'tabs',component:TabsDome},
      ]}
  ]
  
  const app = createApp(App)
  app.use(router) //让App.vue使用router
  app.mount('#app')

2.1添加 <router-view>,要告诉app组件，路由的组件内容在哪里显示

2.1添加<router-link>跳转页面

<h2>组件列表</h2>
        <ol>
          <li>
            <router-link to="/doc/switch">Switch</router-link>
          </li>
          <li>
            <router-link to="/doc/button">Button组件</router-link>
          </li>
          <li>
            <router-link to="/doc/dialog">Dialog组件</router-link>
          </li>
          <li>
            <router-link to="/doc/tabs">Tabs组件</router-link>
          </li>
        </ol>

这样一个带有router跳转的简单页面就出来了