乐趣区

关于javascript:初识vue30ts项目搭建与开发

jiezi

1. 全局装置 create-vite-app

cnpm install create-vite-app --save

2. 创立我的项目目录

cva vue3-demo
或者
create-vite-app vue3-ui
Vue 2 和 Vue 3 的区别

90% 的写法完全一致，除了以下几点

  • Vue 3 的 Template 反对多个根标签，Vue 2 不反对
  • Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
  • createApp(组件)，new Vue({template, render})

3. 引入 Vue Router4

3.1. 应用命令行查看 vue-router 所有版本号

npm info vue-router versions

装置最新的 vue-router@4.0.10

yarn add vue-router@4.0.10

3.2. 初始化 vue-router
1). 新建 history 对象

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

2). 新建 router 对象

const router = createRouter()

3). 引入 TypeScript
把 main.js 文件改为 main.ts，咱们会发现有很多报错
报错 1：createRouter 外面须要传入一个参数，但咱们却传入了 0 个
解决：

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

报错 2：.vue 类型的文件提醒 cannot find module xxx.vue
起因 ts 只能了解.ts 为后缀的文件，无奈了解.vue 文件
解决办法：

  • Google 搜寻 Vue 3 can not find module
  • 创立 xxx.d.ts，通知 TS 如何了解 .vue 文件
  • src/shims-vue.d.ts
declare module '*.vue' {import { Component} from 'vue'
  const component: Component
  export default component
}

这里要留神如果咱们用的是 vscode 这时报错曾经没了，然而如果咱们用的是 webstrom 编辑器它还是会报同样的谬误，咱们须要再额定的装置 ts，而后初始化 ts 配置

yarn add typescript -D
tsc --init

这样报错就会解决了
4). 应用 router

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

5). 增加 <router-view>

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

<script>

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

6). 增加 <router-link>

<div> 导航栏 |
    <router-link to="/">lifa</router-link>
    <router-link to="xxx">lifa2</router-link>
</div>

4. 装置 sass

cnpm install sass sass-loader --save-dev

留神 :sass 要装置在 devDependencies，不然控制台报错

4.3. 从新运行 yarn install

5. 应用 provide 和 inject 实现父子组件通信

5.1. 在父组件里应用 provide 提供一个变量值，provide 第一个参数是变量名，第二个是对应的值

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

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

  • topnav.vue
import {inject, Ref} from 'vue'
  export default {
    name: 'TopNav',
    setup() {const menuVisible = inject<Ref<boolean>>('xxx')
      console.log(menuVisible.value, 'topNav menuvisible')
    }
  }

6. 路由间切换

  • Doc.vue
<li>
    <router-link to="/doc/switch">Switch 组件 </router-link>
</li>
<main>
    <router-view></router-view>
</main>
  • mian.ts
const router = createRouter({
  history,
  routes: [{ path: '/', component: Home},
    { path: '/doc', component: Doc, children: [{ path: 'switch', component: SwitchDemo}
      ]
    }
  ]
})
router.afterEach(() => {console.log('路由切换了')
})

实现点击菜单跳转敞开左侧菜单栏
咱们须要在路由来到的时候将 menuVisible 的值设为 false，然而咱们在 main.ts 里拿不到 menuVisible 这个变量，那如果咱们把 router.afterEach 放在 App 里就能够拜访这个变量了，然而这样的话 App 里又拜访不到咱们的 router 了，所以咱们须要独自构建一个 router.ts 文件

  • 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
import {router} from "./router";
setup() {
    const width = document.documentElement.clientWidth
    const menuVisible = ref(width > 500 ? true : false)
    provide('xxx', menuVisible)
    router.afterEach(() => {menuVisible.value = false})
  }
  • main.ts
import {router} from './router'
const app = createApp(App)
app.use(router)
退出移动版