<fieldset id="ko8e4"></fieldset>

vue單頁(yè)應(yīng)用之創(chuàng)建和運(yùn)行

DTeam 發(fā)布于2019-08-20 18:55 / 2940人閱讀

摘要：首先要開(kāi)始單頁(yè)應(yīng)用開(kāi)發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁(yè)，這里將一步步帶你入的坑。。。

首先要開(kāi)始vue單頁(yè)應(yīng)用開(kāi)發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁(yè)，這里將一步步帶你入vue的坑。。。

1.安裝node

安裝node并不是叫你學(xué)習(xí)node,而是我們需要node里面npm所有才去安裝，進(jìn)入node官網(wǎng)的下載頁(yè)http://nodejs.cn/download/下...，安裝完畢之后在命令框中輸入npm -v看下是否有安裝成功

如果有顯示npm的版本號(hào)說(shuō)明安裝成功

2. 引入淘寶鏡像

這里引入淘寶鏡像主要是為了能夠速度快些，畢竟要訪問(wèn)國(guó)外的有時(shí)候會(huì)比較慢，在命令框中輸入

npm install -g cnpm --registry=https://registry.npm.taobao.org

引入之后查看版本號(hào)，看是否安裝成功，cnpm -v,如果有一大串東西出來(lái)說(shuō)明成功

3.安裝vue腳手架

在命令框中cnpm install vue-cli -g(這里一定要全局安裝)，安裝好之后就可以進(jìn)入vue的開(kāi)發(fā)了,檢查腳手架是否安裝成功vue -V(這里的V要大寫(xiě))

4.安裝webpack

在你想要的磁盤(pán)里面創(chuàng)建一個(gè)項(xiàng)目文件，然后在這個(gè)項(xiàng)目文件的目錄下，打開(kāi)命令框，輸入
cnpm install webpack(這里webpack是局部安裝如果要全局安裝則命令為cnpm install webpack -g)

5.vue項(xiàng)目創(chuàng)建

以上四步都完成之后，在項(xiàng)目文件的目錄下，打開(kāi)命令框輸入vue init webpack 【vue項(xiàng)目名稱(chēng)】

第五步之后，會(huì)在項(xiàng)目文件中看到

vuePro就是我們創(chuàng)建的vue項(xiàng)目開(kāi)發(fā)文件，接下來(lái)都在這個(gè)文件里面進(jìn)行開(kāi)發(fā)vue單頁(yè)應(yīng)用

6.運(yùn)行vue項(xiàng)目

在上面創(chuàng)建的vuePro文件目錄下，打開(kāi)命令提示框，輸入cnpm install,運(yùn)行完畢之后，繼續(xù)在命令框中輸入cnpm run dev接下來(lái)就可以運(yùn)行項(xiàng)目了

注意

若eslint驗(yàn)證太嚴(yán)格需要關(guān)掉，則刪掉build中webpack.base.conf.js文件的這部分即可，刪掉部分如下圖：

test: /.(js|vue)$/,
loader: "eslint-loader",
enforce: "pre",
include: [resolve("src"), resolve("test")],
options: {
  formatter: require("eslint-friendly-formatter")
}