Vue2+webpack+node 配置+入門+詳解
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 配置+入門+詳解