如何使用vue腳手架工具搭建vue-webpack項(xiàng)目

小編給大家分享一下如何使用vue腳手架工具搭建vue-webpack項(xiàng)目，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

1.安裝node環(huán)境

可以使用自帶的終端cmd命令行工具；windows下推薦安裝git bash，可以使用linux命令；

第一步檢測(cè)是否安裝node；沒有安裝node的同學(xué)請(qǐng)到官網(wǎng)下載安裝https://nodejs.org/en/download/

安裝成功后在命令行查看node版本，如果有說明安裝成功。

2.安裝vue腳手架工具vue-cli

大家在安裝node的時(shí)候，會(huì)自動(dòng)安裝npm；

可以先行查看npm版本；

使用npm安裝vue-cli：

npm install vue-cli -g

3.準(zhǔn)備工作已經(jīng)完畢，下面直接使用vue-cli初始化webpack項(xiàng)目；

vue init webpackyourprojectname(項(xiàng)目名)

中間會(huì)輸入項(xiàng)目名稱，項(xiàng)目描述，作者等信息；

一路回車

可以看到我們剛才創(chuàng)建的webpack項(xiàng)目已經(jīng)建好了：

4.查看目錄結(jié)構(gòu)

安裝依賴

$ npm install

國(guó)內(nèi)有些包npm無法安裝，可以使用cnpm安裝

$ npm install

5.啟動(dòng)本地開發(fā)

npm run dev

本地node服務(wù)器已經(jīng)跑起來了，端口為配置文件中的端口

6.配置路由

創(chuàng)建新的頁(yè)面組件，將路由指向該.vue 文件

到此，使用vue-cli創(chuàng)建的vue項(xiàng)目基本可以上手開發(fā)了，恭喜！

7.打包上線

$ npm run build

看到build complete，證明打包成功；

觀察目錄結(jié)構(gòu)，發(fā)現(xiàn)多了一個(gè)dist文件夾，這便是webpack打包后的文件，將改文件和后臺(tái)商量，以什么形式放到服務(wù)器即可，上線成功。

看完了這篇文章，相信你對(duì)“如何使用vue腳手架工具搭建vue-webpack項(xiàng)目”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！