搭建vue項目及基本配置（vue+webpack+axios)

QQ羣招募中：646258285（招募中，沒幾我的說話），
須要交流的朋友能夠直接加我微信( DntBeliv )或QQ( 1121864253 )

---

前期準備

全局安裝 node vue-cli

初始化項目

使用vue的腳手架直接在本地初始化項目
方法：命令行：vue init <template-name> <project-name>

template-name選項爲模板名稱，vue-cli官方爲咱們提供了5種模板。

• webpack-一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。

• webpack-simple-一個簡單webpack+vue-loader的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。

• browserify-一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。

• browserify-simple-一個簡單Browserify+vueify的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。

• simple-一個最簡單的單頁應用模板。

project-name 爲項目名稱。

這裏以經常使用的webpack爲例，
運行：vue init webpack shengyuan

【項目名不能大寫】
結束後獲得一個 shengyuan文件夾，裏面大概就是這樣了

而後當前目錄命令運行：npm run dev
當看到 Compiled successfully 則表示咱們的初始化到這就成功了。

修改結構

一般主要是根據項目須要在原來的基礎上增刪一些文件，操做下來後獲得我想要的結構：（紅色爲修改部分）

接下來，咱們作一個home到autoPage頁的跳轉。

配置路由

在router/index.js中
這裏使用的是路由懶加載的方式：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  //滾動到頂部
  scrollBehavior(to,from,savePosition){
    return{x:0,y:0}
  },
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'home',
      component: resolve=>require(['../views/home/home.vue'],resolve),
    },
    {
      path: '/autoPage',
      name: 'autoPage',
      component: resolve=>require(['../views/autoPage/autoPage.vue'],resolve),
    }
  ]
})

scrollBehavior 部分用於保證跳轉到新頁面時，滾動條處於頂部。
在main.js中將路由掛在在app根實例上：

import router from './router'
var app=new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

接下來
http://127.0.0.1:8080/#/autoPage
http://127.0.0.1:8080/#/home
路由切換成功生效。

配置vuex狀態管理及使用

爲了更靈活的控制組件間的狀態，一般咱們會使用vuex，而且還能管理一些固定的數據方便使用。

• 下載vuex包
  npm i vuex -s

• 新建store文件；
  

• 在store.js中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
state: {
appName:‘demo’
},
getters: {
getState: (state) => (param) => {
return state[param];
}
},
actions: {
setState:(context,obj)=>{
context.commit(‘setState’,obj);
}
},
mutations: {
setState:(state,obj)=>{
state[obj.name]=obj.value;
}
},
modules: {
}
})

上面定義了最經常使用的方法setState，方便自定義修改state數據；

• 使用方式：
  例如在home.vue中，須要將 $store.state.appName值修改；

setAppName:function(){
            this.$store.dispatch('setState',{name:'appName',value:this.appName})
          }

效果大概就是：

Sass的配置使用

• 下載包： npm i node-sass sass-loader -s
  Sass 有兩種語法格式：scss(.scss)和sass(.sass)。這裏的項目使用的是scss。
  具體scss的使用方式參照 sass官網文檔 就行了。下面在home中使用scss,方式以下：
  
  到這裏基本就結束了，打包 npm run build 而後本地打開試試一下，嗯…控制檯報錯，問題是index.html引用不到靜態資源，錯誤以下：
  
  
  很明顯因引用地址不對，去到config.js找到build中的assetsPublicPath，用於配置靜態資源的路徑，將原來的‘/’改’./'就能夠了。
  
  到這裏，vue的基本搭建還有經常使用配置就結束了。

配置axios和全局方法

我選擇 axios 主要緣由主要是:

• 使用Promise管理異步，告別傳統callback方式；
• 支持攔截器等高級配置

配置：

• 下載axios：npm i axios qs
  這裏的qs是配合axios使用，用於處理post請求的參數。（qs更多）
• 新建文件gob.js並配置爲全局
  
• main.js中經過prototype 屬性向vue對象添加屬性和方法。

import Vue from 'vue'

import gob from ‘./util/gob.js’
Vue.prototype.$gob =gob;

接下來經過vue對象的$gob使用就好，例home.vue使用gob中的post方法：

<span @click="$gob.post()">調用gob的post方法</span>

• 在gob中封裝經常使用的post和get方法

import axios from 'axios'
import qs from 'qs'
import store from '../store/store.js'

let gob = {
//域名配置
webUrl:「後臺接口IP」,
post:function(vueObj,options,newUrl){//post請求
options.arg=options.arg||{};
var ipName=’’;
!newUrl?ipName=this.webUrl:ipName=newUrl;
return new Promise(function(resolve, reject) {
axios.post(
ipName+options.url,
qs.stringify(options.arg))
.then(function (response) {
//成功邏輯
resolve(response.data);
})
.catch(function (error) {
//失敗邏輯
reject(error);
});
})
},
get:function(vueObj,options,newUrl){
options.arg=options.arg||{};
var ipName=’’;
!newUrl?ipName=this.webUrl:ipName=newUrl;
return new Promise(function(resolve, reject){
axios.get(ipName+options.url,{params:options.arg})
.then(function (response) {
//成功邏輯
resolve(response.data);
})
.catch(function(error){
//失敗邏輯
reject(error);
});
})
},
}

export default gob

參數說明：
vueObj 必填，主要適用於請求裏面獲取app這個根實例。
options 必填，格式：{url:‘xxx’,arg:{}}
newUrl 選填 用於請求的接口ip不是上面的WebUrl時，這裏填另外的IP。

例：home中調用gob的post方法：

methods:{
	 postApi:function(){
            this.$gob.post(this,{url:'/getList',arg:'index:1,count:10'}).then((res)=>{
                console.log(res)
			})
          },
}

以上就是所有。

生命週期

使用vue要知道的vue的生命週期圖
一個vue文件可看作一個組件，這些可嵌套可複用的組件與根實例組成一個vue應用。

配置rem

https://blog.csdn.net/github_38928905/article/details/90080956

· 關注公衆號【技術齋】，發現更多精彩！