一. vue-cli 认识

官网 ： github.com/vuejs/vue-c…

• Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。我们把它称之为一个脚手架。
• 在开发中，需要打包的文件很多(html,css,js,图片,...)
• vue提供脚手架快速搭建web工程模板
• 全局安装命令(以后很多项目都会使用)：npm install -g vue-cli

二. vue-cli 快速上手(安装)

2.1 新建项目(模块)

2.2 输入命令

• 初始化命令 : vue init webpack

• 成功后的界面

• 输入命令 npm run dev ，成功后在浏览器中访问结果如下：

三. 脚手架结构分析

3.1 找到入口(流程)

• 流程图

• main.js代码解析

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//这里就是模块化方式引入vue(我们以前一般在页面使用<script ...>方式引入)
import Vue from 'vue'
//引入对象的App模块(如果大家点进去看的话，是可以看到里面就是一个首页图片+路由出口)
import App from './App'
//引入一个路由模块(这里面的内容很重要，所有组件都是放在路由中)
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', //挂载对应的元素(大家注意，咱们的默认路径访问的是index.html)
  router, //路由,这个就引用了上面的路由模块(相当于router:router)
  components: { App }, //指定组件
  template: '<App/>'  //这里这样写相当于把App模板组件放到挂载的元素中
})

3.2 脚手架流程分析

3.3 脚手架简单使用

分析后，大家会觉得脚手架很麻烦，但是我们如果只是从使用角色来看，这个还是很简单的。因为主页做好后，咱们只需要关系添加模板与设置路由即可。 下面给大家举个例子。

3.3.1 第一步，准备组件

• 在components文件夹中新建一个vue组件
• 代码如下:

<template>
  <div class="hello">
    <h1>{{msg}},牛皮不？</h1>
  </div>
</template>

<script>
export default {
  name: 'ZhaoYi',
  data () {
    return {
      msg: '我是世界第一等...'
    }
  }
}
</script>

3.3.1 路由文件加入组件

• 代码如下:

import Vue from 'vue'
//引入vue的路由组件(相当于咱们以前的<script ... src="...vue-router.js">)
import Router from 'vue-router'
//引入helloWorld组件
import HelloWorld from '@/components/HelloWorld'
import ZhaoYi from '@/components/ZhaoYi'

Vue.use(Router)

export default new Router({
  //这里是放所有路由的位置
  routes: [
    {
      path: '/',  //基础路径
      name: 'HelloWorld', //组件名称
      component: HelloWorld //对应的helloWorld组件
    },
    {
      path: '/zhaoyi',  //基础路径
      name: 'ZhaoYi', //组件名称
      component: ZhaoYi //对应的ZhaoYi组件
    }
  ]
})

• 输入路径http://localhost:8080/#/zhaoyi,访问效果如下