摘要：別名相當(dāng)于前面先引入了路由插件，然后顯式聲明要用路由。注意到，等都是頁面也可以是組件，接著注冊路由器，然后開始配置路由。

工欲善其事必先利其器，我們的學(xué)習(xí)計劃從學(xué)會搭建Vue所需要的環(huán)境開始，node和npm的環(huán)境不用說是必須的，現(xiàn)在前端流程化很熱門，基本上新的技術(shù)都會在這套流程的基礎(chǔ)上做開發(fā)，我們只需要站在巨人的XX上裝*就可以了。我假設(shè)你的機(jī)子上已經(jīng)有了最新的node和npm了，那我們就只需要執(zhí)行以下命令：

$ npm install -g vue-cli

構(gòu)建完了之后，隨便進(jìn)入一個我們事先準(zhǔn)備好的目錄，比如demo目錄，然后在目錄中做初始化操作：

$ vue init webpack vue-cli-demo

webpack參數(shù)是指vue-cli-demo這個項目將會在開發(fā)和完成階段幫你自動打包代碼，比如將js文件統(tǒng)一合成一個文件，將CSS文件統(tǒng)一合并壓縮等。

init(初始化)的過程中會問你給項目定義一些描述，版本之類的信息，可以不管，一直輸入y確定跳過，完成之后出現(xiàn)以下界面，部分會提示你接下來要做的操作，按照它的提示繼續(xù)敲代碼就對了。
同時獲取信息：

npm i -S axios vue-axios

cd vue-cli-demo
npm install
npm run dev

npm install 是安裝項目所需要的依賴，簡單理解就是安裝一些必要的插件，需要等一段時間；

同樣也可以使用 yarn
npm run dev 是開始執(zhí)行我們的項目了，一旦執(zhí)行這個命令之后，等一小會，瀏覽器應(yīng)該會自動幫你打開一個tab為http://localhost:8080/#/或者h(yuǎn)ttp://127.0.0.1:8080/#/的鏈接，這個鏈接就是我們本地開發(fā)的項目主頁了，如果沒有，說明出錯了。請移步到評論區(qū)回復(fù)吧。。。

看看Vue都給我們生成一些什么文件：

yarn npm包管理工具(facebook)

README.md 通常所有項目的說明文件

package.json 維護(hù)包管理的配置文件，包括版本

index.html 首頁

.postcssrc.js postcss的配置

.gitignore git的忽略文件列表

.eslintrc.js 代碼檢查配置文件

.eslintignore 代碼檢查忽略文件

.editorconfig 編輯器的配置文件

.babelrc babel的配置文件

static 網(wǎng)站的靜態(tài)資源

src 源代碼

src/assets 資源（可以預(yù)處理）

src/components 組件目錄

src/router 路由

src/App.vue 根組件

src/main.js 入口文件

config 配置目錄

build 構(gòu)建工具相關(guān)

test 測試目錄

test/unit 單元測試

test/e2e 端對端測試

dist 打包后的目標(biāo)代碼

這其中我們需要關(guān)注的是以下文件

package.json保存一些依賴信息，config保存一些項目初始化配置，build里面保存一些webpack的初始化配置，index.html是我們的首頁，除了這些，最關(guān)鍵的代碼都在src目錄中，index在很多服務(wù)器語言中都是預(yù)設(shè)為首頁，像index.htm，index.php等；打開build目錄中的webpack.base.conf.js，會看到這樣的代碼

module.exports = {
  entry: {
    app: "./src/main.js"
  }
}

說明我們的入口js文件在src目錄中的main.js，接下來我們就分析下這些初始化代碼先；

Vue的核心架構(gòu)，按照官方解釋和個人理解，主要在于組件和路由兩大模塊，只要理解了這兩大模塊的思想內(nèi)容，剩下API使用就只是分分鐘的事情了。

因是潛入我們只關(guān)注src里的文件即可開發(fā)簡單應(yīng)用

首先是src下的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.
import Vue from "vue"
import App from "./App"
import router from "./router"
import Axios from "axios"
import VueAxios from "vue-axios"
Vue.use(VueAxios, Axios)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  template: "",
  components: { App }
})

import Vue from "vue"

這句很好理解，就像你要引入jQuery一樣，vue就是jquery-min.js，然后Vue就是$；然后又引入了./App文件，也就是目錄中和main.js同級的App.vue文件；在Vue中引入文件可以直接用import，文件后綴名可以是.vue，這是Vue自己的文件類型，之前說的webpack會將js和css文件打包，同樣的道理，在webpack中配置vue插件后（項目默認(rèn)配置），webpack就可以將.vue類型的文件整合打包，這和nodeJs中require差不多的道理。同樣類似于

同時涉及到路由

這句代碼在頁面中放入一個路由視圖容器，當(dāng)我們訪問http://localhost:8080/#/about/的時候會將about的內(nèi)容放進(jìn)去，訪問http://localhost:8080/#/recruit的時候會將recruit的內(nèi)容放進(jìn)去

前面說的src/main.js中有一句引入路由器的代碼。

import router from "./router"

現(xiàn)在就讓我們打開router目錄下的js文件。

import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/Hello"http://@別名相當(dāng)于src

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "Hello",
      component: HelloWorld
    }
  ]
})

前面先引入了路由插件vue-router，然后顯式聲明要用路由 Vue.use(Router) 。注意到Hello，About等都是頁面（也可以是組件），接著注冊路由器，然后開始配置路由。

路由的配置應(yīng)該一目了然，給不同的path分配不同的頁面（或組件，頁面和組件其實是一樣的概念），name參數(shù)不重要只是用來做識別用的?？吹竭@里就可以明白，前面說的紅色框的內(nèi)容，其實就是Hello里面的內(nèi)容，打開components目錄下的HelloWorld.vue就能明白了。

// build for production with minification
//構(gòu)建產(chǎn)品壓縮
npm run build

//build for production and view the bundle analyzer report
//構(gòu)建產(chǎn)品并查看包分析器報告
npm run build --report

config判斷是否上線，加載的資源不同

搭建環(huán)境

代碼邏輯

單頁面組件（簡單帶過）

路由

子路由

以上的流程就是我們剛開始接觸Vue時候的簡單介紹，在之前就說過學(xué)習(xí)Vue能掌握組件和路由的基本概念之后，對于我們后續(xù)了解他的工作機(jī)制有著很大的幫助，本篇章我們只是簡單介紹了單頁面組件。