8.12 Vue-cli

1. vue-cli

• Vue Cli 是一个基于 Vue.js 进行快速开发的完整系统

1. 安装

• Vue Cli 须要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

npm install -g @vue/cli
    //检查版本
    vue --version
复制代码

2. 建立项目

vue create xxxx
    //可视化界面
    vue ui
复制代码

3. 环境依赖

1. package.json文件

• dependencies 上线环境
• devDependencies 开发环境

2. package-lock.json

• 锁定版本

4. babel eslint

• babel ES6转换ES5
• eslint 强制格式校验

5. features

• Babel
• Router
• Vuex
• CSS Pre-processors

2. Vue Router

• 建立单页应用，是很是简单的

1. 定义 (路由) 组件

• 新建vue文件
• 组件template

2. 定义路由

• router.js文件

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue'//引入组件
    
    
    Vue.use(Router)
    
    export default new Router({
        mode: 'history',// history hash 
        base: process.env.BASE_URL,
        routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        }
    ]
复制代码

3. 建立和挂载根实例

• main.js文件
• render函数是渲染一个视图，而后提供给el挂载
• render: h => h(App)等价于render:function(h){return h(App);}

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'

    Vue.config.productionTip = false
    
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
复制代码

4. 动态路由匹配

• 能够在任何组件内经过this.$router访问路由器，也能够经过 this.$route访问当前路由

// Home.vue
    export default {
      computed: {
        username () {
            return this.$route.params.username
        }
      },
      methods: {
        goBack () {
            window.history.length > 1 ? this.$router.go(-1):this.$router.push('/')
        }
      }
    }
复制代码

5. 参数传递

1. v-bind 传参

• 传递

//name 进入的组件名称
    //params 传递的参数
    <router-link :to="{name: 'home', params: {id: '123', name: 'aaa', age: 2}}">首页传参</router-link>
复制代码

• 接收
• params一个对象

<p>{{$route.params.id}}</p>
    <p>{{$route.params.name}}</p>
    <p>{{$route.params.age}}</p>
复制代码

2. 利用url传递

• 传递

<router-link to="/details/333/aaa">详情页</router-link>
复制代码

• 接收

<p>{{$route.params.userId}}</p>
    <p>{{$route.params.name}}</p>
复制代码

• router.js

{
        path: '/details/:userId/:name',
        component: Details
    },
复制代码

3. <router-link>

• 支持用户在具备路由功能的应用中 (点击) 导航
• to 属性指定目标地址
• 默认渲染成带有正确连接的<a>标签

<!-- 字符串 -->
    <router-link to="home">Home</router-link>
    <!-- 渲染结果 -->
    <a href="home">Home</a>
    
    <!-- 使用 v-bind 的 JS 表达式 -->
    <router-link v-bind:to="'home'">Home</router-link>
    
    <!-- 不写 v-bind 也能够，就像绑定别的属性同样 -->
    <router-link :to="'home'">Home</router-link>
    
    <!-- 同上 -->
    <router-link :to="{ path: 'home' }">Home</router-link>
    
    <!-- 命名的路由 -->
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
    
    <!-- 带查询参数，下面的结果为 /register?plan=private -->
    <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
复制代码

4. <router-view>

• functional 组件，渲染路径匹配到的视图组件(占位)

<template>
    	<div class="navbar">
    		<ul id="main">
    			<li><router-link to="/home" >home</router-link></li>
    		</ul>
            <!-- 路由匹配到的组件将显示在这里 -->
            <router-view></router-view>
    	</div>
    </template>
复制代码

• <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件

<router-view class="view one"></router-view>
    <!--Foo-->
    <router-view class="view two" name="a"></router-view>
    <!--Bar-->
    <router-view class="view three" name="b"></router-view>
    <!--Baz-->
    
    <script> const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] }) </script>
复制代码

5. 重定向和别名

1. 重定向

• redirect

const router = new VueRouter({
        routes: [
            { path: '/a', redirect: '/b' }
        ]
    })
复制代码

• 能够是一个命名的路由：

const router = new VueRouter({
        routes: [
            { path: '/a', redirect: { name: 'foo' }}
        ]
    })
复制代码

• 一个方法

const router = new VueRouter({
        routes: [
            { path: '/a', redirect: to => {
                // 方法接收 目标路由 做为参数
                // return 重定向的 字符串路径/路径对象
            }}
        ]
    })
复制代码

2. 别名

• url没有改变，改变的内容
• alias

const router = new VueRouter({
        routes: [
            { path: '/a', component: A, alias: '/b' }
        ]
    })
复制代码

6. 导航守卫

1. 全局前置守卫

• router.beforeEach

const router = new VueRouter({ ... })
    
    router.beforeEach((to, from, next) => {
      // code
    })
复制代码

• 守卫是异步解析执行，此时导航在全部守卫 resolve 完以前一直处于等待中。
• to: Route 即将要进入的目标 路由对象
• from: Route当前导航正要离开的路由
• next: Function 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
• next()进行管道中的下一个钩子。若是所有钩子执行完了，则导航的状态就是 confirmed (确认的)。
• next(false)中断当前的导航。若是浏览器的 URL 改变了 (多是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。 -next('/') 或者 next({ path: '/' })跳转到一个不一样的地址。当前的导航被中断，而后进行一个新的导航。你能够向 next 传递任意位置对象，且容许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或router.push 中的选项。
• next(error)若是传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()注册过的回调。
• 确保要调用 next 方法，不然钩子就不会被 resolved。

2. 全局解析守卫

• router.beforeResolve 和 router.beforeEach 相似

• 区别

  在导航被确认以前，同时在全部组件内守卫和异步路由组件被解析以后，解析守卫就被调用。

3. 全局后置钩子

• 这些钩子不会接受 next 函数也不会改变导航自己

router.afterEach((to, from) => {
        // code
    })
复制代码

4. 路由独享的守卫

• router.beforeEnter

const router = new VueRouter({
        routes: [
            {
                path: '/foo',
                component: Foo,
                beforeEnter: (to, from, next) => {
                    // ...
                }
            }
        ]
    })
复制代码

5. 组件内的守卫

• 组件内
• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 由于当守卫执行前，组件实例还没被建立
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，可是该组件被复用时调用
        // 举例来讲，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 因为会渲染一样的 Foo 组件，所以组件实例会被复用。而这个钩子就会在这个状况下被调用。
        // 能够访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 能够访问组件实例 `this`
      }
    }
复制代码

7. 页面动画

1. fade-enter进入过渡的开始状态
2. fade-enter-active进入过渡的结束状态
3. fade-enter-to进入结束状态
4. fade-leave离开过渡的开始状态
5. fade-leave-active离开过渡的结束状态
6. fade-leave-to离开结束状态