這篇文章主要介紹vue-cli如何構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

致力于企業(yè)形象建設(shè)和產(chǎn)品！多年來，創(chuàng)新互聯(lián)不忘初心，以建立行業(yè)服務(wù)標(biāo)桿為目標(biāo)，不斷提升技術(shù)設(shè)計(jì)服務(wù)水平，幫助客戶在互聯(lián)網(wǎng)推廣自己的產(chǎn)品、服務(wù)，為客戶創(chuàng)造價(jià)值從而實(shí)現(xiàn)自身價(jià)值！中小型企業(yè)如何做品牌網(wǎng)站建設(shè)？初創(chuàng)業(yè)公司建站預(yù)算不足？

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

Vue兩大核心思想，組件化和數(shù)據(jù)驅(qū)動(dòng)，組件化就是將一個(gè)整體合理拆分為一個(gè)一個(gè)小塊（組件），組件可重復(fù)使用，數(shù)據(jù)驅(qū)動(dòng)是前端的未來發(fā)展方向，釋放了對(duì)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可以實(shí)現(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時(shí)，已經(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

三、生成項(xiàng)目模板 vue init webpack vuedemo

webpack是模板名稱，這里我們需要使用webpack的打包功能，所以使用webpack,其他更多模板參見：https://github.com/vuejs-templates

vuedemo是項(xiàng)目名稱

上述命令回車之后，出現(xiàn)如下設(shè)置：

Project description :項(xiàng)目描述

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是之前輸入的項(xiàng)目名）

使用tree命令查看項(xiàng)目目錄結(jié)構(gòu)如下：（如果沒有tree命令，使用 sudo apt install tree安裝）

安裝依賴的庫：

npm install

編譯程序

npm run dev

同時(shí)瀏覽器出現(xiàn)如下界面：

如果沒有出現(xiàn) 的話，可能你的8080端口被占用了，可以在config/index.js中將dev中的port改為其他值試試

四、webpack打包

這里需要的知識(shí)涉及webpack,可以參考https://github.com/varHarrie/Dawn-Blossoms/issues/7

對(duì)比上面我們提到的關(guān)于webpack的教程，我們需要關(guān)注下項(xiàng)目文件加下的build/webpack.base.conf.js文件

在這里，我們需要關(guān)注的只有注釋的兩個(gè)參數(shù)。至于config.build.assetsRoot的具體值是在哪里設(shè)置的呢？第三行：

var config = require('../config')

表明了config這個(gè)變量的引入文件加在哪里。在項(xiàng)目文件夾下的config/index中定義了build.assetsRoot的值

其中：__dirname是當(dāng)前文件所在項(xiàng)目的文件夾的絕對(duì)路徑

這時(shí)，我們查看文件目錄如下：

運(yùn)行：npm run build .這樣就可以將資源文件打包到上面我們設(shè)置的文件夾dist/ 中

再次查看項(xiàng)目文件夾的目錄結(jié)構(gòu)：

此時(shí)已經(jīng)自動(dòng)生成了dist文件夾，在這個(gè)文件夾下有index.html文件和public文件夾，public文件夾下存放的就是webpack打包之后的文件。

以上是“vue-cli如何構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：vue-cli如何構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包-創(chuàng)新互聯(lián)
鏈接URL：http://weahome.cn/article/dgpidh.html