Vue-使用webpack+vue-cli搭建項目

1、準備

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

技巧使用： 

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

2、搭建項目

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

　　npm install vue-cli -g

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

　　 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安裝

三、安裝依賴包 node_modules

　　npm install

四、運行項目

　　npm run dev

3、項目說明

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

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

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

！！！爲何把這裏的App.vue稱爲根組件，main.js稱爲入口文件呢？

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

三、如何配置 npm run dev 在瀏覽器後自啓動項目

經過修改config中的index.js文件把autoOpenBrowser改成true~下次運行npm run dev或者npm start後即會自動啓動頁面

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

因爲還在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'

5、關於打包

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