Vue CLI 3.0介紹：
https://cli.vuejs.org/zh/guide/
Vue CLI 3.0配置參考
https://cli.vuejs.org/zh/config/
https://youzan.github.io/vant/#/zh-CN
hub.com/shimiso/VueFrameWork
https://shimiso.github.io/VueFrameWork/dist/#/
https://github.com/shimiso/VueDemo
這是我們組內搞的vue的學習視頻，40節課demo，一週上手，2周出活
https://edu.csdn.net/course/detail/5342
vue路由配置
index.js 中引入文件 import Reg from '@/components/Reg'
配置路由
export default new Router({
routes: [
{
path: '/',
component: HelloWorld,
},
{
path: '/login',
component: Login,
},
{
path: '/reg',
component: Reg,
},
]
})
3.創建文件
<template>
<div>
<ComHeader></ComHeader>
註冊內容
<ComFooter></ComFooter>
</div>
</template>
<script>
</script>
<style scoped>
</style>
Vue 公用文件配置
創建公用文件 Footer.vue
<template>
<div>
<p>我是尾部組件</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped></style>
2. 引入文件
import ComHeader from './components/common/Header'
import ComFooter from './components/common/Footer'
3.註冊標籤
export default {
name: 'App',
components:{
ComHeader,
ComFooter,
}
}
4.引入標籤
<ComFooter></ComFooter>
守衛
全局守衛(main.js)
router.beforeEach((to, from, next) => {
//會在任意路由跳轉前執行，next一定要記着執行，不然路由不能跳轉了
alert(111);
next();
})
獨享路由守衛
export default new Router({
routes:
[
{
path: '/',
component: HelloWorld,
},
{
path: '/login',
component: Login,
beforeEnter: (to, from, next) => {
// ..
console.log('經過路由守衛');
}
},
{
path: '/reg',
component: Reg,
},
{
path: '/user',
component: User,
},
]
})