一、安装脚手架

1、下载node.js，本文下载版本为node-v8.12.0-x64.msi，一键式安装。

2、安装完成后，打开终端，输入node，可进入node环境（两次ctrl+c退出），如下图：

3、查看版本，如下图：

4、在成功安装node.js（即能够成功查看版本如上图）的前提下，再安装淘宝npm（），命令如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

　　执行结果如下：

5、安装脚手架

　　依次执行下面两条命令：

npm install -g @vue/cli

npm install -g @vue/cli-init              // 注释：这是拉取cli版本2的命令

　　CLI3版本的文档：

　　CLI2版本的文档：

6、执行完毕后输入vue -V验证是否成功，如下图：

二、过滤器 

1、过滤器分为局部过滤器和全局过滤器，定义和使用如下：

　　总结：

　　　　1）局部过滤器：在当前组件内部使用；

　　　　2）全局过滤器：只要过滤器一创建，在任何组件中都能使用；

　　　　3）过滤器其实就是给某些数据“添油加醋”；

　　　　4）上面示例用到了moment.js（一个处理时间的类库：http://momentjs.cn/）中moment方法；

三、生命周期的钩子函数

　　每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

　　我们可以在官方文档的API 的选项/生命周期钩子看到有如下生命周期钩子函数：

　　总结（created和mounted是重点）：

　　　　created：发送ajax，获取数据，实现数据驱动视图；

　　　　mounted：获取真实DOM；

　　　　activated：激活当前组件；

　　　　deactivated：停用当前组件，依赖vue提供的内置组件，主要作用是让组件产生缓存；

　　　　destroyed：如果开了定时器，可在此函数中关闭定时器；

四、VUE的全家桶 （vue + vue-router + vuex）

　　vue + vue-router主要来做SPA（Single Page Application），即单页面应用。

　　vue-router是vue的核心插件，它要依赖vue。

　　为什么要使用单页面应用？

　　因为传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动视图。为了用户体验。

　　单页面应用的网站有路飞学城、稀土掘金（https://juejin.im），和网易云音乐。

五、vue-router的基本使用

　　Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使用Vue.js构建单页应用程序变得轻而易举。

　　注意：如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)，相当于给Vue的原型上挂载了一个属性。

1、vue-router基本使用

2、命名路由

　　有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。如下：

// 创建路由const router = new VueRouter({    // 定义路由规则    routes: [        {            path: '/',            redirect: '/home'    // 重定向        },        {            path: '/home',            name: 'home',            component: Home        },        {            path: '/course',         name: 'course',            component: Course        }    ]});

　　要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象，如下：

     
      首页
     
     
      免费课程
     

3、动态路由

　　示例中$route对象在从控制台输出结果如下：

4、编程式导航vs声明式导航　　

　　除了使用<router-link>创建 a 标签来定义导航链接（声明式导航），我们还可以借助 router 的实例方法，通过编写代码来实现（编程式导航）。如下：

5、注意

　　组件中的函数写在methods属性中，created等属性中也可以定义函数，我们有时候可以将在created中执行的方法定义在methods中，在created中执行。