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,

            },

      ]

})