詳解vue-cli快速構(gòu)建vue應(yīng)用并實現(xiàn)webpack打包
Vue是什么，是一套構(gòu)建用戶界面的漸進(jìn)式框架（官網(wǎng)解釋），什么叫漸進(jìn)式框架呢，簡單回答就是主張最少，這些概念只能自己去看，自己去理解，一千個讀者一千個哈姆雷特，不過多的解釋。Vue官方文檔 很全面的。
Vue兩大核心思想，組件化和數(shù)據(jù)驅(qū)動，組件化就是將一個整體合理拆分為一個一個小塊（組件），組件可重復(fù)使用，數(shù)據(jù)驅(qū)動是前端的未來發(fā)展方向，釋放了對DOM的操作，讓DOM隨著數(shù)據(jù)的變化自然而然的變化（尤神原話），不必過多的關(guān)注DOM，只需要將數(shù)據(jù)組織好即可。
一、什么是vue-cli
vue-cli是由vue官方發(fā)布的快速構(gòu)建vue單頁面的腳手架。參見vue-cli官方網(wǎng)站。http://vuejs-templates.github.io/webpack/
之前需要使用vue的單文件組件的功能，即將不同的模板分離到不同的.vue后綴的文件中，這樣做需要使用webpack打包。參見官方說明：https://cn.vuejs.org/v2/guide/single-file-components.html
然后在網(wǎng)上看來許多關(guān)于使用webpack打包文件的教程，如下：
https://github.com/varHarrie/Dawn-Blossoms/issues/7
普遍采用上面這篇文章介紹的方式。這樣需要自己配置很多文件，操作復(fù)雜。后面我發(fā)現(xiàn)使用vue-cli可以實現(xiàn)webpack的快速打包。具體操作在后面介紹
二、安裝vue-cli (基于ubuntu操作)
1、安裝node
sudo apt-get install nodejs
2.安裝npm
sudo apt-get install npm
2. 使用npm安裝vue-cli
npm install --global vue-cli
使用vue -V檢查是否安裝成功。
在安裝vue-cli時，已經(jīng)自帶安裝webpack。
在這步中，可能比較慢，可以使用淘寶的鏡像文件?？蓞⒖迹篽ttp://riny.net/2014/cnpm/
如下設(shè)置：
npm install -g cnpm --registry=https://registry.npm.taobao.org
再使用cnpm安裝vue-cli
cnpm install -g vue-cli
三、生成項目模板 vue init webpack vuedemo
webpack是模板名稱，這里我們需要使用webpack的打包功能，所以使用webpack,其他更多模板參見：https://github.com/vuejs-templates
vuedemo是項目名稱
上述命令回車之后，出現(xiàn)如下設(shè)置：
Project description :項目描述
Author: 作者
Vue build：打包方式（直接回車就可以）
Install ESL TO lint your code? 是否使用ESL代碼檢測
Pick an ESLint preset? standard (設(shè)置編碼風(fēng)格采用stardard 參加(https://github.com/feross/standard)
Setup unit tets with Kara + mocha? 是否安裝單元測試，我選擇安裝
Setup e2e tests with Nightwatc? 是否安裝e2e測試 ，我選擇安裝
進(jìn)入創(chuàng)建的工程下面：
cd vuedemo （這里的vuedemo是之前輸入的項目名）
使用tree命令查看項目目錄結(jié)構(gòu)如下：（如果沒有tree命令，使用 sudo apt install tree安裝）
安裝依賴的庫：
npm install
編譯程序
npm run dev
同時瀏覽器出現(xiàn)如下界面：
如果沒有出現(xiàn) 的話，可能你的8080端口被占用了，可以在config/index.js中將dev中的port改為其他值試試
四、webpack打包
這里需要的知識涉及webpack,可以參考https://github.com/varHarrie/Dawn-Blossoms/issues/7
對比上面我們提到的關(guān)于webpack的教程，我們需要關(guān)注下項目文件加下的build/webpack.base.conf.js文件
在這里，我們需要關(guān)注的只有注釋的兩個參數(shù)。至于config.build.assetsRoot的具體值是在哪里設(shè)置的呢？第三行：
var config = require('../config')
表明了config這個變量的引入文件加在哪里。在項目文件夾下的config/index中定義了build.assetsRoot的值
其中：__dirname是當(dāng)前文件所在項目的文件夾的絕對路徑
這時，我們查看文件目錄如下：
運行：npm run build .這樣就可以將資源文件打包到上面我們設(shè)置的文件夾dist/ 中
再次查看項目文件夾的目錄結(jié)構(gòu)：
此時已經(jīng)自動生成了dist文件夾，在這個文件夾下有index.html文件和public文件夾，public文件夾下存放的就是webpack打包之后的文件。
五、總結(jié)：
總的來說，只需要一下幾個步驟就可以快速使用vue-cli搭建使用webpack的vue單頁面項目：
1、sudo apt-get install nodejs
2、sudo apt-get install nmp
3、nmp install -g vue-cli
4、vue init webpack vuedemo
5、cd vuedemo
6、npm run dev
7、npm run bulid
六、參考網(wǎng)站
vue-cli官網(wǎng)：http://vuejs-templates.github.io/webpack/e2e.html
webpack打包介紹：https://github.com/varHarrie/Dawn-Blossoms/issues/7
基于vue-cli快速構(gòu)建:http://www.fzitv.net/article/112174.htm
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue2.0實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
express+vue+mongodb+session 實現(xiàn)注冊登錄功能
這篇文章主要介紹了express+vue+mongodb+session 實現(xiàn)注冊登錄,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了通過cordova將vue項目打包為webapp的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了WebPack配置vue多頁面的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖片上傳預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法
這篇文章主要介紹了vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了VUE響應(yīng)式原理的實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家介紹了Vue指令實現(xiàn)大屏元素分辨率適配詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
在本篇文章里小編給大家整理的是關(guān)于vue中使用rem布局代碼詳解知識點，需要的朋友們參考下。2019-10-10
Vue實現(xiàn)購物車的全選、單選、顯示商品價格代碼實例
這篇文章主要介紹了Vue實現(xiàn)購物車的全選、單選、顯示商品價格實例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05