vite搭建官网
预备工作
1. 全局安装create-vite-app:
yarn global add create-vite-app@版本号
2. 创建项目目录
cva wanwanui
或者
create-vite-app wanwanui
3. Vue 2 和 Vue 3 的区别
- 90% 的写法完全一致，除了以下几点
- Vue 3 的 Template 支持多个根标签，Vue 2 不支持
- Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
- createApp(组件)，new Vue({template, render})
4. 引入 Vue Router 4
- 专门和vue3搭配的
- 查看vue-router的版本号：
npm info vue-router versions
安装最新的：
yarn add vue-router@4.0.0-beta.6
- 新建并且引入router
import {createWebHashHistory, createRouter} from 'vue-router'
const history = createWebHashHistory()
const router = createRouter()
5. 引入ts
- 1）把main.js改为main.ts
- 2） 发现一个错误：createRouter里面需要传入一个参数，但我们却传入了0个
- 解决：
const router = createRouter({
history,
routes: [
{ path: '/', component: hello }
]
})
6. 问题2：找不到模块 xxx.vue
- 出现原因 TypeScript 只能理解 .ts 文件，无法理解 .vue 文件
- 解决办法： Google 搜索 Vue 3 can not find module 创建 shims-vue.d.ts，告诉 TS 如何理解 .vue 文件
- 新建src/shims-vue.d.ts
declare module '*.vue' {
import { ComponentOptions } from 'vue'
const componentOptions: ComponentOptions
export default componentOptions
}
- 用webstorm需要额外再安装ts
yarn add typescript -D
tsc --init
7. 使用router
const app = createApp(App)
app.use(router)
app.mount('#app')
8. 添加router-view:
在哪里展示组件
// App.vue
<template>
<div>hi</div>
<router-view/>
</template>
<script>
export default {
name: 'App'
}
</script>
9. 添加
<div>导航栏 |
<router-link to="/">con1</router-link>
<router-link to="xxx">com2</router-link>
</div>
创建首页
1. 设计整体layout
- Home.vue：
- Doc.vue：
2. 2个页面有一模一样的topNav，所以封装：
3. 先实现手机样式，再PC
4. 实现点击切换aside：
- 使用provide和inject实现切换功能：
- 点击logo出现aside，再点击，aside消失
- 在app.vue声明menuVisible ，provide
<script lang="ts">
import {ref,provide} from 'vue'
import {router} from './router.ts'
export default {
name: 'App',
setup(){
const width = document.documentElement.clientWidth
let menuVisible = ref(width <= 500 ? false : true)
provide('xxx', menuVisible) //set
router.afterEach(()=>{
if(width <= 500){
menuVisible.value = false;
}
})
}
}
在topNav.vue和doc.vue使用inject
import {inject , Ref} from 'vue'
export default {
name: "Topnav",
setup(){
const menuVisible = inject <Ref<boolean>>('xxx') //get
const toggleMenu =()=>{
menuVisible.value = !menuVisible.value
}
return {toggleMenu}
}
}
实现手机页面上的侧边栏切换按钮
实现宽度小于500的时候，吧侧边栏隐藏起来。
// 媒体查询
@media (max-width:500px){
> .menu{display:none;}
> .logo{margin:0 auto;position: static}
> .toggleIcon{display:inline-block}
}
路由切换
点击侧边栏组件，显示相应文档：嵌套路由
1. 在手机端，切换路由的时候，把侧边栏关掉：
2. 我们需要在路由离开的时候将menuVisible的值设为false，但是我们在main.ts里拿不到menuVisible这个变量，那如果我们把router.afterEach放在App里就可以访问这个变量了，但是这样的话App里又访问不到我们的router了，所以我们需要单独构建一个router.ts文件。然后在main.ts和App.vue里引入router.ts
// main.ts和App.vue
import {router} from './router.ts'
router.ts
export const router = createRouter({
history: history,
routes: [
{path: '/', component: Home},
{path: '/doc', component: Doc,children:[
{path:'',redirect:'/doc/intro'},
{path:'intro',component: md(intro)},
{path:'start',component: md(start)},
{path:'install',component: md(install)},
{path:'switch',component:SwitchDemo},
{path:'button',component:ButtonDemo},
{path:'dialog',component:DialogDemo},
{path:'tabs',component:TabsDemo},
]}
]
})
然后在App.vue写afterEach()
setup(){
const width = document.documentElement.clientWidth
let menuVisible = ref(width <= 500 ? false : true) // 在pc端永远为true，不需要点击切换显示
provide('xxx', menuVisible) //set
router.afterEach(()=>{
if(width <= 500){ //如果在pc，是不需要判断的，只有在手机上需要此功能
menuVisible.value = false;
}
})
}
