Vue3 开发环境/搭建官网

软件安装

Node.js 稳定版
npm（不需要安装，Node.js 自带 npm）
yarn
VSCode

技术栈

Vue 3.0 最新版
TypeScript 最新版
Vue Router 最新版
Vite 最新版

使用 Vite 搭建官网

• 安装 create-vite-app
• 安装 yarn
• 使用 yarn dev 进行开发

• 安装 vue-router

  pc/手机交互 — 响应式页面

• 使用 媒体查询@media

当页面 > 500px , logo在左上角
当页面 < 500px , logo在中间

  @media (max-width: 500px) {
        >.menu {
            display: none;
        }
        >.logo {
            margin: 0 auto;
        }
    }

通过页面的宽度来决定初始值

const width = document.documentElement.clientWidth;
const asideVisible = ref(width <= 500 ? false : true);

菜单栏 — 切换（实现点击显示隐藏）

• 使用 provide 和 inject 实现 aside 的切换

App.vue

 setup() {
        const asideVisible = ref(false)
        provide("xxx", asideVisible)
    }

Topnav.vue

 setup() {
        const asideVisible = inject < Ref < boolean >> ("xxx")
        const toggleAside = () => {asideVisible.value = !asideVisible.value}
        return {toggleAside}
    }

Doc.vue

  <aside v-if="asideVisible">
 //-------------------------------------------------------------     
  setup() {
        const asideVisible = inject < Ref < boolean >> ("xxx")
        return {asideVisible}
    }

Vue3.0报错解决： 找不到模块

在 TS 文件中 import .vue 文件时，TS出现报错，找不到模块！
找不到模块“./components/Ashine.vue”或其相应的类型声明
报错原因：typescript 只能理解 .ts文件
解决方案：在根目录下 创建一个后缀为 .d.ts 结尾的文件，如下：

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

我创建后，因为多了以下第一行，依旧显示找不到模块！! 记得只保留上图的代码既可！！！

//import { Component, ComponentOptions } from "vue"
declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}