vue學習

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路由配置

1. index.js 中引入文件??import Reg from '@/components/Reg'

2. 配置路由

????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 公用文件配置

1. 創建公用文件 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,

????????????},

??????]

})