? ? ? Vue是近兩年來比較火的一個前端框架（漸進式框架吧），與reactjs和angularjs三國鼎立，我不是職業前端，做過Vue，了解了一下React，聽說過Angluar。我只能這么說，我來晚了，沒經歷所有。閑話少說進入正題。

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

????? Vue兩大核心思想，組件化和數據驅動，組件化就是將一個整體合理拆分為一個一個小塊（組件），組件可重復使用，數據驅動是前端的未來發展方向，釋放了對DOM的操作，讓DOM隨著數據的變化自然而然的變化（尤神原話），不必過多的關注DOM，只需要將數據組織好即可。

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

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

? ? ? npm install --global vue-cli

????? 安裝完成后

cmd安裝完成圖

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

?

npm自動安裝

安裝完成后，創建自己的工作空間，在cmd切換至剛剛創建好的工作空間，如果已經有工作空間，直接切換到工作空間即可。使用命令創建項目

vue init webpack vuetest

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將這兩句的提示信息刪掉或注釋掉，再打包直接用瀏覽器直接運行就好了。

?

打包好的文件

index.html就是單頁應用的頁面，static文件夾下的兩個文件夾是什么，都知道，就不多說。這里的文件名和文件路徑都是可以通過配置文件修改的，具體可以按照命令的執行看一下。

另外注意下，在進行頁面調試時，請用Chrome瀏覽器，因為要使用到vue-tool擴展程序，這個擴展程序，自己去谷歌商店下載，打開之后可以看到

?

頁面

右上角有個vue小logo，表示我們已經安裝vue-tool擴展工具，并且啟用了，F12打開調試工具，會多一個Vue選項，沒有看到的話點擊最后面的“>>”按鈕，就可以看到所有的功能了，要是還是沒有，就重啟一下瀏覽器。在這里看到組件的層級結構。

轉載于:https://www.cnblogs.com/zhengyan/p/10772800.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vue-cli2.0创建项目步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。