一、準備

安裝NodeJs?+?安裝Webpack?+?配置環境變量?

技巧使用：?

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

二、搭建項目

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

　　npm install vue-cli -g

2、初始化 （項目名小寫）

　　?vue init webpack project? 或?vue init webpack-simple project? ?# 前者構建的應用豐富于后一個　

項目基本信息配置：

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

3、安裝依賴包?node_modules

　　npm install

4、運行項目

　　npm run dev

三、項目說明

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

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

2、vue-cli初始化文件目錄結構詳解

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

在main.js（入口文件）中App.vue（根組件）import進來了，掛載在了index.html（主頁面）id為app的div上。也就是說，掛載在index.html（主頁面）的組件就是根組件，把根組件掛載在主頁面的文件就是入口文件。

3、如何配置 npm run dev 在瀏覽器后自啟動項目

通過修改config中的index.js文件把autoOpenBrowser改為true~下次運行npm run dev或者npm start后即會自動啟動頁面

四、開發過程中遇到的跨域問題

由于還在script標簽開發的方式下，前端文件和后端文件都在同在apache服務器下，直接請求本機同一個端口的文件并不屬于跨域。但是在vue-cli方式下，由node.js起的一個臨時的服務器占用的是8080端口和后端所方式的文件不處于同一個端口號，這就出現了跨域的問題。
解決方法：修改config index.js中的proxyTable

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

路徑重寫有什么用呢？如果你程序得接口本來就有這個路徑地址，你可以不需要重寫，如果沒有就需要重寫，把其重寫為空，我這個程序接口其實本來就有/DNA,其實我這里可以不需要重寫，然后把target改為'http://localhost/repo'

五、關于打包

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

打包出來的文件結果，默認情況，打包生成的文件會放在vue-demo下的dist文件夾，注意雙擊html是不能打開這個文件的（雙擊打開顯示的是一片空白），打包出來的文件需要放在服務器上才能跑起來，以前我雙擊打開看到白白的文件，一直以為是我打包出錯了哈哈哈。

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

?

原文作者：風子豬
原文地址：https://segmentfault.com/a/1190000015680030

轉載于:https://www.cnblogs.com/yangchin9/p/11004638.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。