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

時間 2020-11-30

標籤 css html 前端 vue node webpack ios git web vue-cli 欄目 CSS 简体版

原文原文鏈接

Vue2介紹

1.vue2.0 css

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

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

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

2.Webpack前端

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

webpack有四個核心概念：node

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

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

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

3. nodegit

一般狀況下，JavaScript的運行環境都是瀏覽器，所以JavaScript的能力也就侷限於瀏覽器能賦予它的權限了。好比說讀寫本地系統文件這種操做，通常狀況下運行在瀏覽器中的JavaScript代碼是沒有這個操做權限的。web

Node.js是一個服務端的JavaScript運行環境，經過Node.js能夠實現用JavaScript寫獨立程序。即便你不用Node.js寫獨立程序，也得配一個Node.js運行環境，畢竟不少前端工具都是使用它寫的。vue-cli

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