使用Vue3.0 + vite搭建项目

Vue 2 和 Vue 3 的区别

Vue 3 的 Template 支持多个根标签，Vue 2 不支持
Vue 3 的主函数是 createApp()，而 Vue 2 的是 new Vue()
createApp(组件)               接收的是组件
new Vue({template, render})   接收的是对象

使用Vite搭建官网，创建项目，全局安装 create-vite-app

yarn global add create-vite-app@1.18.0
或者
npm i -g create-vite-app@1.18.0

创建项目目录

cva vue3-ui
或者
create-vite-app vue3-ui

进入项目

npm install (or `yarn`)
npm run dev (or `yarn dev`)

引入Vue Router4

npm info vue-router versions          查看 vue-router的所有版本号
yarn add vue-router@4.0.0-beta.3      安装vue-router

初始化vue-router，新建 history 对象

import {createWebHashHistory, createRouter} from 'vue-router'
const history = createWebHashHistory()

新建 router 对象

const router = createRouter()

引入 TypeScript，把main.js文件改为main.ts，会产生很多报错信息

报错1：createRouter里面需要传入一个参数，但我们却没有传入

const router = createRouter({
  history,
  routes: [
    { path: '/', component: Lifa }
  ]
})

报错2：.vue类型的文件提示cannot find module xxx.vue；ts只能理解.ts后缀的文件，无法理解.vue

在src目录下新建 shims-vue.d.ts文件，进行配置

declare module "*.vue" {
  import { ComponentOptions } from "vue";
  const componentOptions: ComponentOptions;
  export default componentOptions;
}

报错3：使用webstrom还会报同样的错误，需要额外安装ts，然后初始化ts配置

yarn add typescript -D
tsc --init

在App.vue里使用vue-router

const app = createApp(App)
app.use(router)
app.mount('#app')

添加 router-view 路由要展示的组件的位置

App.vue
<template>
  <div>hi</div>
  <router-view/>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

添加 router-link 跳转路由

<div>导航栏 |
    <router-link to="/">导航1</router-link> |
    <router-link to="xxx">导航2</router-link>
</div>

使用scss写样式时，控制台会报错

安装sass

yarn add sass

控制台继续报错，解决方法：

打开package.json
把dependencies里的sass这一行，移到devDependencies
重新运行yarn install

使用provide和inject实现父子组件通信

在父组件里创建一个变量，使用provide把这个变量标记为所有后代都可以使用

App.vue
<script lang="ts">
import { ref, provide } from 'vue'
export default {
  name: 'App',
  setup() {
    const menuVisible = ref(false)
    provide('menuVisible', menuVisible)
  }
}
</script>

在子组件里通过inject使用这个变量，括号里的就是你设置的provide的key值

topnav.vue
<script lang="ts">
  import {inject, Ref} from 'vue'
  export default {
    setup(){
      const menuVisible = inject<Ref<boolean>>('menuVisible')
      const toggleMenu = ()=>{
        menuVisible.value = !menuVisible.value
      }
      return {toggleMenu}
    }
  };
</script>

路由间切换（嵌套路由）

Doc.vue

<li>
    <router-link to="/doc/switch">Switch 组件</router-link>
</li>
<main>
    <router-view />
</main>

mian.ts（设置路由的路径以及对应的组件）

const router = createRouter({
  history,
  routes: [
    { path: '/', component: Home },
    { path: '/doc', component: Doc, children: [
        { path: 'switch', component: SwitchDemo }
      ]
    }
  ]
})
router.afterEach(() => {             // afterEach 监听路由变化
  console.log('路由切换了')
})

点击菜单跳转关闭左侧菜单栏

我们需要在路由离开的时候将menuVisible变量的值设为false
但这个变量在App.vue里，main.ts访问不到App里
如果把router.afterEach放在App里main就可以访问这个变量，但App访问不到router
单独创建一个router.ts文件，然后让让main.ts和App.vue引入router
App.vue就可以使用router.afterEach在路由变化时修改变量的值

创建 router.ts

import {createWebHashHistory, createRouter} from 'vue-router';
import Home from './views/Home.vue';
import Doc from './views/Doc.vue';
import SwitchDemo from './views/SwitchDemo.vue';
const history = createWebHashHistory();
export const router = createRouter({
  history,
  routes: [
    { path: '/', component: Home },
    { path: '/doc', component: Doc, children: [
        { path: 'switch', component: SwitchDemo }
      ]
    }
  ],
});

在 App.vue 里引入 router

import { router } from "./router";
setup() {
    const width = document.documentElement.clientWidth
    const menuVisible = ref(width >= 500 ? true : false)
    provide('menuVisible', menuVisible)
    router.afterEach(() => {
      menuVisible.value = false
    })
  }

main.ts

import {router} from './router'
const app = createApp(App)
app.use(router)

刚实现搭建官网的骨架，具体实现过程及样式后续更新中