一、本文將分享如何快速搭起基于webpack+vue的前端項(xiàng)目框架，利用vue的自己的腳手架工具vue-cli搭建起基本的環(huán)境配置，再通過(guò)npm包管理工具引入相應(yīng)的依賴(lài)來(lái)完善項(xiàng)目的各種依賴(lài)框架。下面是具體實(shí)操。

為云南等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及云南網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、云南網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

二、基本命令操作。

1.在開(kāi)發(fā)之前需要首先安裝node.js，直接百度搜索或者在其中文官網(wǎng)也可以下載http://nodejs.cn/download/

在裝完node之后npm包管理工具也自動(dòng)的安裝好，安裝完之后，在命令行輸入node -v或者npm -v，出現(xiàn)版本號(hào)說(shuō)明安裝成功。如下圖所示：

2.在使用npm之前，最好把鏡像換成淘寶的,長(zhǎng)久使用，跑一下命令：npm config set registry https://registry.npm.taobao.org，

替換成功后跑npm config get registry命令顯示淘寶鏡像路徑的話就代表替換成功。

3.第二步全局安裝vue-cli，在命令窗口輸入npm install -g vue-cli，然后跑vue -V出現(xiàn)版本號(hào)證明安裝成功。

4.開(kāi)始生成項(xiàng)目，在本地硬盤(pán)找一個(gè)目錄存放代碼，然后打開(kāi)命令行cd切換到相應(yīng)的路徑下，然后跑 vue init webpack Vue-Project（項(xiàng)目名稱(chēng)）

vue init webpack Vue-Project（項(xiàng)目名稱(chēng)）

5.輸入cd Vue-Project  然后安裝依賴(lài)npm install, 如果平常時(shí)開(kāi)發(fā)就跑npm run dev(本地開(kāi)發(fā)跑代碼)，如果需要打包則跑npm run build。

6.項(xiàng)目默認(rèn)監(jiān)聽(tīng)的是80端口，容易跟其他應(yīng)用引起端口沖突，所以在項(xiàng)目下打開(kāi)config文件夾，打開(kāi)index.js，把端口改為8888，這樣就避免沖突了，

7.最后重新跑指令npm run dev   ,然后再地址欄輸入http://localhost:8888,就會(huì)出現(xiàn)相應(yīng)的頁(yè)面。

三、添加相應(yīng)的框架以及依賴(lài)

1.引入sass預(yù)編譯工具加快編碼速度，跑命令npm install node-sass --save-dev, npm install sass-loader --save-dev,如果node-sass比較難裝的話可以換成cnpm來(lái)下載依賴(lài)，具體可百度下做法。

操作：

在components目錄下新建一個(gè)header的目錄，新建兩個(gè)文件header.vue  header.scss，然后引入到app.vue中使用，因?yàn)関ue講的是模塊化開(kāi)發(fā)，所以我喜歡把樣式跟組件放到一個(gè)文件夾里跟其他模塊區(qū)分，

App.vue:

header.scss:

這樣就證明sass 是安裝成功了。

 2.引入axios接口請(qǐng)求框架，跑命令npm install axios --save-dev,npm install qs;

 然后在src目錄下新建一個(gè)http.js文件進(jìn)行接口請(qǐng)求的相關(guān)配置，

import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs';


var instance = axios.create({
 //baseURL: 'https://some-domain.com/api/',
 timeout: timeout,
 responseType: 'json', // default,
 //headers: {'apikey': 'foobar'},
 transformRequest:function(data,headers){
  //為了避免qs格式化時(shí)對(duì)內(nèi)層對(duì)象的格式化先把內(nèi)層的對(duì)象轉(zhuǎn)為
  //由于使用的form-data傳數(shù)據(jù)所以要格式化
  if (typeof data == 'string') {
  
   headers.post['Content-Type'] = "application/json; charset=utf-8";
  
  }
  else if(!(data instanceof FormData)){
  headers.post['Content-Type'] = "application/x-www-form-urlencoded";
  
   for(let key in data){
   if(data[key]===undefined){
    data[key]=null;
   }
   }
   data = Qs.stringify(data);
 }

  return data;
 }
});
export default instance; 

Vue.prototype.$http=instance;

在使用請(qǐng)求接口的時(shí)候直接可以這樣用：(具體用法可以看下官方文檔)

this.$http.get(url).then((res)=>{
}）

3.引入elementUI，跟人感覺(jué)elementUI是比較好用的vue組件UI，很多東西不用自己去寫(xiě)，推薦使用，跑指令npm install element-ui --save,

然后在main.js中引入使用

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

當(dāng)然也可以按需引入，想用什么組件就引入什么組件，不要全部引入，這樣減少體積。

4.引入vuex

Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

安裝：npm install vuex --save

具體使用這里不做詳細(xì)介紹，感興趣的可以看下中文官網(wǎng)：https://vuex.vuejs.org/zh-cn/。