Vue-cli淺入淺出

搭建環境

工欲善其事必先利其器，咱們的學習計劃從學會搭建Vue所須要的環境開始，node和npm的環境不用說是必須的，如今前端流程化很熱門，基本上新的技術都會在這套流程的基礎上作開發，咱們只須要站在巨人的XX上裝*就能夠了。我假設你的機子上已經有了最新的node和npm了，那咱們就只須要執行如下命令：

$ npm install -g vue-cli

構建完了以後，隨便進入一個咱們事先準備好的目錄，好比demo目錄，而後在目錄中作初始化操做：

$ vue init webpack vue-cli-demo

webpack參數是指vue-cli-demo這個項目將會在開發和完成階段幫你自動打包代碼，好比將js文件統一合成一個文件，將CSS文件統一合併壓縮等。

init(初始化)的過程當中會問你給項目定義一些描述，版本之類的信息，能夠無論，一直輸入y肯定跳過，完成以後出現如下界面，部分會提示你接下來要作的操做，按照它的提示繼續敲代碼就對了。
同時獲取信息：

npm i -S axios vue-axios

cd vue-cli-demo
npm install
npm run dev

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

一樣也可使用 yarn
npm run dev 是開始執行咱們的項目了，一旦執行這個命令以後，等一小會，瀏覽器應該會自動幫你打開一個tab爲http://localhost:8080/#/或者http://127.0.0.1:8080/#/的連接，這個連接就是咱們本地開發的項目主頁了，若是沒有，說明出錯了。請移步到評論區回覆吧。。。

生成的文件

看看Vue都給咱們生成一些什麼文件：

• yarn npm包管理工具(facebook)

• README.md 一般全部項目的說明文件

• package.json 維護包管理的配置文件，包括版本

• index.html 首頁

• .postcssrc.js postcss的配置

• .gitignore git的忽略文件列表

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

• .eslintignore 代碼檢查忽略文件

• .editorconfig 編輯器的配置文件

• .babelrc babel的配置文件

• static 網站的靜態資源

• src 源代碼

• src/assets 資源（能夠預處理）

• src/components 組件目錄

• src/router 路由

• src/App.vue 根組件

• src/main.js 入口文件

• config 配置目錄

• build 構建工具相關

• test 測試目錄

• test/unit 單元測試

• test/e2e 端對端測試

• dist 打包後的目標代碼

這其中咱們須要關注的是如下文件

package.json保存一些依賴信息，config保存一些項目初始化配置，build裏面保存一些webpack的初始化配置，index.html是咱們的首頁，除了這些，最關鍵的代碼都在src目錄中，index在不少服務器語言中都是預設爲首頁，像index.htm，index.php等；打開build目錄中的webpack.base.conf.js，會看到這樣的代碼

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

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

跟着代碼走

Vue的核心架構，按照官方解釋和我的理解，主要在於組件和路由兩大模塊，只要理解了這兩大模塊的思想內容，剩下API使用就只是分分鐘的事情了。

因是潛入咱們只關注src裏的文件便可開發簡單應用

首先是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: '<App/>',
  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插件後（項目默認配置），webpack就能夠將.vue類型的文件整合打包，這和nodeJs中require差很少的道理。一樣相似於<script>加載其餘文件

第二句

import App from './App'
import router from './router'//引入路由備置

這兩句類似，都是獲取當前目錄下文件

import Vue from 'vue'
import App from './App'/*引入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',/*最後效果將會替換頁面中id爲app的div元素*/
  router,/*使用路由*/
  template: '<App/>',/*告知頁面這個組件用這樣的標籤來包裹着,而且使用它*/
  components: { App }/*告知當前頁面想使用App這個組件*/
})

Vue.config.productionTip = false阻止生產提示出現
/* eslint-disable no-new */阻止eslint檢測如下代碼的格式

單頁面組件

好了，如今打開咱們的App.vue文件，在Vue中，官網叫它作組件，單頁面的意思是結構，樣式，邏輯代碼都寫在同一個文件中，當咱們引入這個文件後，就至關於引入對應的結構、樣式和JS代碼，這不就是咱們作前端組件化最想看到的嗎，從前的asp、php也有這樣的文件思想。

<template>
  <div id="app">
    <img src="./assets/logo.png">//從src中的assets資源包中獲取資源圖片
    <router-view></router-view>//輸出端口
  </div>
</template>

<script>
export default {
  name: 'app'//只有在調用自身時，使用
}//渲染頁面
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

同時涉及到路由

路由

<router-view></router-view>

這句代碼在頁面中放入一個路由視圖容器，當咱們訪問http://localhost:8080/#/about/的時候會將about的內容放進去，訪問http://localhost:8080/#/recruit的時候會將recruit的內容放進去

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

import router from './router'

如今就讓咱們打開router目錄下的js文件。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/Hello'//@別名至關於src

Vue.use(Router)

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

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

路由的配置應該一目瞭然，給不一樣的path分配不一樣的頁面（或組件，頁面和組件實際上是同樣的概念），name參數不重要只是用來作識別用的。看到這裏就能夠明白，前面說的紅色框的內容，其實就是Hello裏面的內容，打開components目錄下的HelloWorld.vue就能明白了。

build文件夾和config文件夾淺講

// build for production with minification
//構建產品壓縮
npm run build

//build for production and view the bundle analyzer report
//構建產品並查看包分析器報告
npm run build --report

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

總結下前面講的內容先：

• 搭建環境

• 代碼邏輯

• 單頁面組件（簡單帶過）

• 路由

• 子路由

以上的流程就是咱們剛開始接觸Vue時候的簡單介紹，在以前就說過學習Vue能掌握組件和路由的基本概念以後，對於咱們後續瞭解他的工做機制有着很大的幫助，本篇章咱們只是簡單介紹了單頁面組件。