一、準(zhǔn)備

安裝NodeJs?+?安裝Webpack?+?配置環(huán)境變量?

技巧使用：?

　　1. npm 淘寶路徑配置：npm config set registry=https://registry.npm.taobao.org
　　2.查看npm命令列表 =>? ?$ npm help

二、搭建項(xiàng)目

1、全局安裝vue腳手架工具 vue-cli

　　npm install vue-cli -g

2、初始化 （項(xiàng)目名小寫(xiě)）

　　?vue init webpack project? 或?vue init webpack-simple project? ?# 前者構(gòu)建的應(yīng)用豐富于后一個(gè)　

項(xiàng)目基本信息配置：

　　Project name (demo-one) # 項(xiàng)目名稱(chēng)
　　Project description (A Vue.js project) # 項(xiàng)目描述
　　Author 作者
? ? ? ?Vue build (Use arrow keys) # 直接回車(chē) 選擇runtime+compiler
　　Install vue-router? (Y/n) # 是否安裝Vue路由，也就是以后是spa（但頁(yè)面應(yīng)用需要的模塊）
　　Use ESLint to lint your code? (Y/n) # 使用 ESLint 代碼檢測(cè)工具
　　Pick an ESLint preset (Use arrow keys) # 選擇一個(gè)預(yù)置ESLint（使用箭頭鍵）
　　Setup unit tests with Karma + Mocha? (Y/n) #?是否需要單元測(cè)試工具 暫時(shí)不需要 n 否
　　Setup e2e tests with Nightwatch? (Y/n) #?是否安裝端到端測(cè)試工具 暫時(shí)不需要 n 否
? ? ? ?Should we run?npm install?for you after the project has been created??在創(chuàng)建完項(xiàng)目之后是否需要自動(dòng)運(yùn)行npm install來(lái)下載第三方包 我這里選擇第一個(gè)npm安裝

3、安裝依賴(lài)包?node_modules

　　npm install

4、運(yùn)行項(xiàng)目

　　npm run dev

三、項(xiàng)目說(shuō)明

1、npm install安裝的是什么呢？我們剛剛在 vue init 初始化的時(shí)候會(huì)生成一個(gè) package.json 文件

npm install 則會(huì)安裝package.json中寫(xiě)的需要依賴(lài)的第三方包，包括dependencies和devDependencies
//如果該安裝方式太慢，可以使用cnpm淘寶代理鏡像?
安裝好后就 可以 npm run dev 運(yùn)行項(xiàng)目了

2、vue-cli初始化文件目錄結(jié)構(gòu)詳解

！！！為什么把這里的App.vue稱(chēng)為根組件，main.js稱(chēng)為入口文件呢？

在main.js（入口文件）中App.vue（根組件）import進(jìn)來(lái)了，掛載在了index.html（主頁(yè)面）id為app的div上。也就是說(shuō)，掛載在index.html（主頁(yè)面）的組件就是根組件，把根組件掛載在主頁(yè)面的文件就是入口文件。

3、如何配置 npm run dev 在瀏覽器后自啟動(dòng)項(xiàng)目

通過(guò)修改config中的index.js文件把a(bǔ)utoOpenBrowser改為true~下次運(yùn)行npm run dev或者npm start后即會(huì)自動(dòng)啟動(dòng)頁(yè)面

四、開(kāi)發(fā)過(guò)程中遇到的跨域問(wèn)題

由于還在script標(biāo)簽開(kāi)發(fā)的方式下，前端文件和后端文件都在同在apache服務(wù)器下，直接請(qǐng)求本機(jī)同一個(gè)端口的文件并不屬于跨域。但是在vue-cli方式下，由node.js起的一個(gè)臨時(shí)的服務(wù)器占用的是8080端口和后端所方式的文件不處于同一個(gè)端口號(hào)，這就出現(xiàn)了跨域的問(wèn)題。
解決方法：修改config index.js中的proxyTable

在main.js（入口文件）中加入一行Vue.prototype.HOST = '/DNA'
以請(qǐng)求的url地址為url: this.HOST+"/insert/get_data"為例子對(duì)proxyTable做一個(gè)說(shuō)明
請(qǐng)求的url為/DNA/insert/get_data,由于請(qǐng)求的url中包含了proxyTable中配置了的/DNA,這時(shí)候Node.js代理服務(wù)器就可以發(fā)揮作用了。Node.js會(huì)去請(qǐng)求http://localhost/repo/DNA/ins...，把請(qǐng)求得到的接口返回給前端。
為啥是http://localhost/repo/DNA/ins...，下面做一下講解

路徑重寫(xiě)有什么用呢？如果你程序得接口本來(lái)就有這個(gè)路徑地址，你可以不需要重寫(xiě)，如果沒(méi)有就需要重寫(xiě)，把其重寫(xiě)為空，我這個(gè)程序接口其實(shí)本來(lái)就有/DNA,其實(shí)我這里可以不需要重寫(xiě)，然后把target改為'http://localhost/repo'

五、關(guān)于打包

vue-cli已經(jīng)把打包的東西配置好了，只需要通過(guò)npm run build 或者 node build/build.js即可對(duì)程序進(jìn)行打包。
為啥輸入npm run build可以進(jìn)行打包呢也是package.json配置好的原因

打包出來(lái)的文件結(jié)果，默認(rèn)情況，打包生成的文件會(huì)放在vue-demo下的dist文件夾，注意雙擊html是不能打開(kāi)這個(gè)文件的（雙擊打開(kāi)顯示的是一片空白），打包出來(lái)的文件需要放在服務(wù)器上才能跑起來(lái)，以前我雙擊打開(kāi)看到白白的文件，一直以為是我打包出錯(cuò)了哈哈哈。

至于static文件和index.html存放的路徑是可以修改的，可以修改為任意的路徑，方便打包后的程序的運(yùn)行。
修改config文件夾下的index.js文件中build對(duì)象的參數(shù)即可。

?

原文作者：風(fēng)子豬
原文地址：https://segmentfault.com/a/1190000015680030

轉(zhuǎn)載于:https://www.cnblogs.com/yangchin9/p/11004638.html

總結(jié)

以上是生活随笔為你收集整理的Vue-使用webpack+vue-cli搭建项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。