Vue2介紹

1.vue2.0

Vue (讀音 /vju?/，類似於 view) 是一套用於構建用戶界面的漸進式框架。

• Vue 的核心庫只關註視圖層
• 采用單文件組件
• 復雜大型單頁應用程序（SPA）
• 響應式的數據綁定，與組件化的開發

HTML中的DOM與其他的部分獨立開來劃分出一個層次，這個層次就叫做視圖層

2.Webpack

Webpack是一個前端打包和構建工具。

webpack有四個核心概念：

• 入口（entry）指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。可以單個入口或多個入口
• 輸出（output）輸出它所創建的 bundles，以及如何命名這些文件，默認值為 ./dist。
• loader（）loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊
• 插件（plugins）插件則可以用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務

打包：減少瀏覽器頁面的請求，將圖片/腳本代碼/，打包成一個文件，只發起一次請求，將資源全部下載。

構建：babel轉換，Sass，Less，stylus的CSS預處理器

3. node

通常情況下，JavaScript的運行環境都是瀏覽器，因此JavaScript的能力也就局限於瀏覽器能賦予它的權限了。比如說讀寫本地系統文件這種操作，一般情況下運行在瀏覽器中的JavaScript代碼是沒有這個操作權限的。

Node.js是一個服務端的JavaScript運行環境，通過Node.js可以實現用JavaScript寫獨立程序。即使你不用Node.js寫獨立程序，也得配一個Node.js運行環境，畢竟很多前端工具都是使用它寫的。

4. npm

NPM是一個node.js的包管理器。

包的依賴關系一直是個很頭疼的問題，如這個包的代碼本身可能還調用了其他的包，那麽我們使用時還需要其他的包，在自己的項目中引入這個依賴的包將變得十分困難。

NPM可以安裝和管理包。

5.Vue-CLi

它是一個vue.js的腳手架工具。自動生成好項目目錄，配置好Webpack，以及各種依賴包的工具

6. Vuex

Vuex是vue的一個狀態管理器。用於集中管理一個單頁應用程序中的各種狀態。

7. Vue-route

Vue-route是vue的一個前端路由器，路由器是一個管理請求入口和頁面映射關系的東西。它可以實現對頁面局部進行無刷新的替換，讓用戶感覺就像切換到了網頁一樣。

8.Axios

Axios是一個基於promise的http庫，可以用在瀏覽器和node.js中

• 支持瀏覽器和node.js
• 支持promise
• 能攔截請求和響應
• 能轉換請求和響應數據
• 能取消請求
• 自動轉換JSON數據
• 瀏覽器端支持防止CSRF(跨站請求偽造)

所以要學Vue需要學多少東西？
1.ECMAScript6的新增功能（promise構造函數，）
2.webpack的配置打包（項目中的配置文件）
3.ESLint配置（一個代碼規範和錯誤檢查工具）
4.bable配置（ES6和ES5轉換器）
5.npm使用（包的安裝與依賴）
6.Vuex（一個存儲數據的狀態管理器）
7.vue-Route(路由)
8.vue-cli（一鍵全家桶工具）
…………（html/css/js基本語法就不用多說了，寶寶心累……）

安裝

實踐出真知，幹巴巴的讀官方文檔真是有苦難言。
寶寶直接一鍵全家桶後才開始慢慢去了解更多的……

開始使用前，請確保你有這些：

• node.js
• npm
• vue
• vue-cli
• 代碼編輯軟件（寶寶一直用webstorm,當然也有其他的……）

不懂安裝的請去別處搜索，有別的小姐姐小哥哥會告訴你的。

在cmd中查看是否安裝，用的版本號是多少，輸入命令，有提示說明安裝了。（vue 的版本一定要用大寫）

> node -v
v8.9.4
>vue -V
2.9.3
>npm -v
6.1.0

構建一個項目

1.創建項目

以上已安裝好，請盡情的奔放……

打開cmd命令，進入你需要創建項目的目錄下，比如：我要在d盤的project下創建一個名為mydemo的項目

D:\project>vue init webpack mydemo

之後一大串，項目名稱，作者，是否build,是否使用代碼規範等等一系列，寶寶是一直entry下去的。

然後它會提示三個命令：

cd mydemo  //進入你所在項目
npm install //安裝依賴包
npm run dev //運行項目

2.安裝依賴包

你的文件夾有以下基本文件夾：build,config,src,static。
生成的項目無法直接運行，不然會報錯，項目本身依賴很多包模塊，你需要安裝。

打開cmd進入你的項目目錄下：

D:\project\mydemo>npm install

這個過程會很久。

完成之後，項目下會多出一個node_modules文件夾，這就是我們項目所需的依賴包。

3.運行項目

打開cmd進入你的項目目錄下:

D:\project\mydemo>npm run dev

會提示項目運行地址：http://localhost:8080

瀏覽器進入地址，你會看到vue圖標，說明項目運行成功。

用cmd命令行很麻煩，如果編碼軟件支持，可以直接用編碼軟件直接打開終端運行，較為方便。

這個時候，我就去看官方文檔去了，了解一下：

• 構建一個Vue實例，實例的生命周期
• 模板語法
• 指令：v-if,v-show,v-for,v-bind,v-on,v-model
• 數據的處理如何與指令或模板結合
• class/style的綁定
• 組件
• 單頁與多頁
• 路由
• 組件註冊，通信

官方文檔還是不錯的，受益頗多……

生命周期

每個Vue實例在被創建之前都要經過一系列的初始化過程,這個過程就是vue的生命周期。

如下：創建前，創建結束，掛載前，掛載結束，更新前，更新結束，銷毀前，銷毀結束

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

el: ‘#app‘,
data: {
  message: ‘Vue的生命周期‘
},
beforeCreate: function() {
      console.group(‘------beforeCreate創建前狀態------‘);
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red","message: " + this.message) //undefined 
    },
    created: function() {
      console.group(‘------created創建完畢狀態------‘);
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 [object object]
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化 Vue的生命周期
    },
    beforeMount: function() {
      console.group(‘------beforeMount掛載前狀態------‘);
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化[object HTMLDivElement]
      console.log(this.$el);//<div id="app">...</div>
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  [object object]
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  Vue的生命周期
    },
    mounted: function() {
      console.group(‘------mounted 掛載結束狀態------‘);
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化[object HTMLDivElement]
      console.log(this.$el);    //<div id="app">...</div>
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 [object object]
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  Vue的生命周期
    },
    beforeUpdate: function () {
      console.group(‘beforeUpdate 更新前狀態===============》‘);
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);   
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    updated: function () {
      console.group(‘updated 更新完成狀態===============》‘);
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    beforeDestroy: function () {
      console.group(‘beforeDestroy 銷毀前狀態===============》‘);
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    destroyed: function () {
      console.group(‘destroyed 銷毀完成狀態===============》‘);
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message)
    }

created:初始化事件，進行數據監測，可見data已經有值，但el並沒有變化。

beforemount:
判斷實例是否有el節點，在創建實例時是否有掛載DOM節點，vm.$mount(‘#app‘),如若沒有，生命周期結束，停止編譯。
此時<div>{{message}}</div>並沒有值

mounted:掛載完成後，data的message才會真正在視圖中顯示出文字。

deforeUpdata:data變化，重新渲染。

其他不會解釋了，看其他文檔，細嚼慢咽吧……

文檔解說

配置文件

• webpack.base.conf.js
  基礎的環境配置，可以說是各個環境（包括開發環境，生產環境，測試環境）都需要的配置，公用配置部分。
  包含，編譯入口，輸出路徑和命名規則，省略拓展名，配置很長的相對路徑的別名，loader配置不同模塊的處理規則
• webpack.dev.conf.js
  webpack開發環境的核心配置文件，系統配置文件。
  當npm run dev時，運行的就是此文件。
  包含，插件
• webpack.prod.conf.js
  webpack生產環境的核心配置文件，系統配置文件。
  當npm run build時，運行的就是此文件。
  包含，打包，
• config/index.js
  全局配置文件。
  包含，，是否使用代碼規範，項目入口，端口，服務器代理，
  前後臺分離時必須部署配置此文件

diss文件夾

build後出現的打包文件夾

src

應當包含以下文件（單頁為例）

• assets//圖片css
  css
  img
• common //共用js和api
• components //組件
• router
  index.js //路由配置
• app.vue //.vue入口
• index.js //js入口，相當於（main.js）

package.json

用來管理本地安裝 npm 包的唯一文件。它描述了當前項目依賴的包的列表，包含項目依賴包的版本，便於項目管理和移植

.gitignore

忽略文件

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/unit/coverage/
/test/e2e/reports/
selenium-debug.log
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

項目運行流程

來源：https://segmentfault.com/a/1190000016886928

Vue2+webpack+node 配置+入門+詳解