基於vue-cli快速構建

時間 2019-11-12

標籤基於 vue cli 快速構建简体版

原文原文鏈接

Vue是近兩年來比較火的一個前端框架（漸進式框架吧），與reactjs和angularjs三國鼎立，我不是職業前端，作過Vue，瞭解了一下React，據說過Angluar。我只能這麼說，我來晚了，沒經歷全部。閒話少說進入正題。javascript

Vue是什麼，是一套構建用戶界面的漸進式框架（官網解釋），什麼叫漸進式框架呢，簡單回答就是主張最少，這些概念只能本身去看，本身去理解，一千個讀者一千個哈姆雷特，不過多的解釋。Vue官方文檔很全面的。html

Vue兩大核心思想，組件化和數據驅動，組件化就是將一個總體合理拆分爲一個一個小塊（組件），組件可重複使用，數據驅動是前端的將來發展方向，釋放了對DOM的操做，讓DOM隨着數據的變化天然而然的變化（尤神原話），沒必要過多的關注DOM，只須要將數據組織好便可。前端

Vue-cli是快速構建這個單頁應用的腳手架，這個但是官方的。官方給的建議，若是你是初次嘗試Vue，哪就老老實實用普通的書寫引入js文件，這裏牽扯太多的東西，例如webpack 、npm 、nodejs 等等，很容易成就從入門到放棄的思想。這篇文章自己就是按照官方的文檔中的構建流程來的（官方構建建議）。一下是構建過程。vue

1.使用npm全局安裝vue-cli（前提是你已經安裝了nodejs，不然你連npm都用不了），在cmd中輸入一下命令java

npm install --global vue-clinode

安裝完成後react

cmd安裝完成圖

同時在C:\Users\Andminster\AppData\Roaming\npm目錄下爲會生成幾個文件webpack

npm自動安裝

安裝完成後，建立本身的工做空間，在cmd切換至剛剛建立好的工做空間，若是已經有工做空間，直接切換到工做空間便可。使用命令建立項目git

vue init webpack vuetestangularjs

Test是項目名稱，這個名字本身隨便取。

命令輸入後，會進入安裝階段，須要用戶輸入一些信息

Project name (vuetest) 項目名稱，能夠本身指定，也可直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯Sorry, name can no longer contain capital letters），阮一峯老師博客爲何文件名要小寫，能夠參考一下。

Project description (A Vue.js project) 項目描述，也可直接點擊回車，使用默認名字

Author (........) 做者，不用說了，你想輸什麼就輸什麼吧

接下來會讓用戶選擇

Runtime + Compiler: recommended for most users 運行加編譯，既然已經說了推薦，就選它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，已經有推薦了就選擇第一個了

Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數狀況下都使用，不過個人第一個項目中的路由是本身寫的，沒有使用到官方路由，由於有特殊需求，也由於比較早，官方還沒有成熟，vue-router官網。這裏就輸入「y」後回車便可。

Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響總體的運行，這也是爲了多人協做，新手就不用了，通常項目中都會使用。ESLint官網

接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，由於我選擇了使用ESLint

Standard (https://github.com/feross/standard) 標準，有些看不明白，什麼標準呢，去給提示的standardgithub地址看一下，原來時js的標準風格

AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法，這個github地址說的是JavaScript最合理的方法

none (configure it yourself) 這個不用說，本身定義風格

具體選擇哪一個因人而異吧，我選擇標準風格

Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝

Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試，我選擇安裝

完成

基本配置完成

已經說明vue-cli建立了vuetest，接下來要作的命令已經給出，那就按照提示來，先看一下，項目的目錄

新建的項目目錄

簡單說一下這個目錄，

bulid 裏面是一些操做文件，使用npm run * 時其實執行的就是這裏的文件

config 配置文件，執行文件須要的配置信息

src 資源文件，全部的組件以及所用的圖片都是在這個放着的簡單看一下這個文件夾下都放了那些東西

src目錄

assets 資源文件夾，放圖片之類的資源，components 組件文件夾，寫的全部組件都放在這個文件夾下，如今有一個寫好的組件已經放到裏面了，router 路由文件夾，這個決定了也面的跳轉規則，App.vue應用組件，全部本身寫的組件，都是在這個組件之上運行了，main.js webpack入口文件，webpack四大特性entry入口、output輸出，loader加載器，plugins插件，能夠再項目中build\webpack.base.conf.js第12行看到這個入口文件是哪一個。

切換到項目目錄

cd vuetest

安裝一來模塊

npm install

這裏只用了install是安裝全部的模塊，若是是安裝具體的那個模塊install 後面輸入模塊的名字便可，只輸入install就按照項目的根目錄下的package.json文件中依賴的模塊安裝，這個文件裏面是不容許有任何註釋的，每一個使用npm管理的項目都有這個文件，是npm操做的入口文件。由於是初始項目，尚未任何模塊，須要安裝全部的模塊，這就是爲何咱們剛下載下來別人的項目時都須要先運行 npm install 命令，由於模塊較多，文件比較大，因此沒有上傳模塊，這個不須要上傳那些文件的配置是在根目錄下.gitignore配置的，這是git操做的配置文件，涉及到的git操做都要操做這個文件，能夠沒有，也能夠什麼都不寫。這個安裝時間比較長，再加上npm是國外的服務器，就更慢了，也能夠再開始以前就講npm切換到taobao鏡像上，就相對會快一些，這裏能夠看一下阮一峯老師的npm 模塊安裝機制簡介

安裝完成後，目錄中會多出來一個node_modules文件夾，這裏放的就是全部依賴的模塊，如何將npm切換至cnpm

node-nodules

這裏文件比較多，也比較大，如今就明白爲何你們都不上傳這個文件了

項目構建完成，如今咱們輸入npm run dev運行項目吧，看看有什麼效果

自動打開默認瀏覽器顯示頁面

下面來大概屢一下程序的執行流程

執行npm run dev命令，程序會先找到根目錄下的package.json文件，找到文件中的scripts項，找到對應的dev命令，執行dev對應的命令，這裏咱們也能夠不用npm run dev 直接輸入dev後面的命令效果是同樣的，這樣作的目的是由於有時命令會很長有很難記住，這種方式會很是的方便，具體只用能夠參考阮一峯老師的npm script使用指南

執行dev命令，按照dev命令中的路徑找到對應的build下dev-server.js文件，以後按照腳本的程序執行，首先引入版本檢測文件check-versions，使用的機制可學習一下阮一峯老師的require() 源碼解讀，接下來引入配置文件，process.env.NODE_ENV獲取環境變量，也就是判斷當前運行的是測試環視開發環境，但是使用console.log(process.env.NODE_ENV)將獲取到的值打印到cmd中，能夠看到是值是config\dev.env.js第五行定義的值「development」，很顯然是開發模式，接下來就是引入一些模塊，在第13行中，根據環境變量來判斷咱們要引入哪一個執行文件，顯然是當前目錄下的webpack.dev.conf文件，先不看這個文件，下來是端口號，這個比較關心一些，畢竟端口號不能一直是8080端口吧，要常常修改這個端口號的。端口號又是判斷的，而且也用到了換將變量了，這一次我門將process.env、process.env.PORT、config.dev.port都打印出來，看看裏面都什麼，（這裏要說明一下，當咱們直接將打印代碼寫到獲取端口號下面是，剛運行時有，自動打開頁面時被刷新了，還沒來得及看呢，不過仔細一點，就會發現它本身也打印了一句話「Listening at http://localhost:8080」，我在文件中71行找到了打印這句話的代碼，好的，那我就把打印寫到這了），看看輸出什麼呢，內容至關的多，我就不貼代碼了，主要看一下，判斷的兩個端口號是多少

process.env.PORT >>> undefined

config.dev.port >>> 8080

很顯然，當前所用的端口號是配置文件中的端口號了，可是看一下配置文件中，並無dev或dev.port文件啊，可一下將config中的全部文件都看一遍，看哪裏有8080的代碼，文件很少，代碼不成，很快就能找見的。很快就在index.js文件下找到了，原來這塊的dev只的並非文件，而是index.js中的dev對象，而且port取得是的dev對象中port的值，端口號就在這裏修改，這裏牽扯的內容較多，就很少說了（這裏說個小技巧，當找不見某個變量時，優先從index、main之類頻繁使用字樣的文件中查找，由於這是一種習慣吧）。好了，這個文件的內容較多，不所有說了，看一下注釋大概知道是什麼意思，後續另寫篇博客對這些文件和代碼統一說明。

下面簡單看一下webpack.dev.conf文件，主要看到var baseConfig = require('./webpack.base.conf')，除了webpack.base.conf自己之外，其他三個webpack配置文件都引入了這個文件，從字面就能夠看出，這是webpack的基礎配置，這些文件就不過多說明了。

接下來就看一下webpack.base.conf文件，這是核心文件，必須執行的文件，這裏能夠看到entry和output，這就是入口和輸出路徑，在入口處看到了./src/main.js，這就找到了界面的入口處了。

在main.js中能夠看到建立了一個vue實例，並加載了模板組件App.vue，在再App.vue組件中看到模板加入來了一個圖片和一個自定義的router-view標籤，這個標籤是在vue-router模塊中定義的，由於在main.js建立vue實例時已經添加了router，這裏能夠直接使用，router-view標籤裏的內容能夠經過src\router\index.js中查看，在第三行看到import Hello from 'components/Hello'，引入了components下的Hello文件，而且在routes使用到了這個組件，這就是router-view標籤加載（渲染）的內容，在Hello.vue文件中看到了瀏覽器顯示的出logo一外的算有元素，界面上顯示的全部內容都找到了，在經過output輸出到界面上整個過程就執行完了。

在說一下打包，由於不可能將這個項目就這樣部署上去，須要將頁面打包，打包命令爲

npm run build

打包

打包完成後，會在根目錄下生成一個dist文件夾，這就是最後的成品頁面，在打包好的最底下爲們會看到一個黃色的警告

警告

它提示提示：創建文件是放在一個HTTP服務器。打開index.html文件：/ /不工做。當直接使用瀏覽器打開文件時，瀏覽器控制檯會報錯

報錯

不少資源都加載失敗，仔細看一下路徑，絕對路徑，F盤下哪有static文件夾，那就要將打包的路徑改成相對路徑，這個根據build命令一路跟蹤，到config\index.js文件中的build對象，將assetsPublicPath中的「/」，改成「./」便可，就在前面加個點就能夠了，並在build\build.js將這兩句的提示信息刪掉或註釋掉，再打包直接用瀏覽器直接運行就行了。