vue項(xiàng)目全了解

1.創(chuàng)建vue項(xiàng)目

1.全局安裝vue-cli

     npm install --global vue-cli  （或cnpm install --global vue-cli）
     注意：cnpm需先安裝淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org.

2.安裝初始項(xiàng)目vue init webpack + 項(xiàng)目名稱

     vue init webpack vue-base-demo

3.成功之后，安裝項(xiàng)目依賴：

 cnpm install

2.安裝項(xiàng)目常用插件

• axios

  為什么要用axios?
  axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：
  從瀏覽器中創(chuàng)建 XMLHttpRequest，    從 node.js 發(fā)出 http 請求，支持 Promise API，攔截請求和響應(yīng)，轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)，取消請求，自動轉(zhuǎn)換JSON數(shù)據(jù)，客戶端支持防止CSRF/XSRF。
  

//安裝
npm install axios --save

//在main.js中引入
import axios from 'axios'

//再main.js獲取axios對象
Vue.prototype.axios = axios

//在main.js添加可以全局設(shè)置，之后就可以不用填域名頭和請求頭
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 在main.js添加可以全局?jǐn)r截器
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
    // 在發(fā)送請求之前做些什么
    return config;
  }, function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  });

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
    // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
    return response;
  }, function (error) {
    // 對響應(yīng)錯誤做點(diǎn)什么
    return Promise.reject(error);
  });

注意：
axios的post請求只接收form-data格式：
  1.form-data格式：
    就是http請求中的multipart/form-data,它會將表單的數(shù)據(jù)處理為一條消息,以標(biāo)簽為單元,用分隔符分開.既可以 上傳鍵值對,也可以上傳文件.當(dāng)上傳的字段是文件時(shí)會有Content-Type來表名文件類型;content-disposition用 來說明字段的一些信息;
    由于有boundary隔離,所以multipart/form-data既可以上傳文件也可以上傳鍵值對,它采用了鍵值對的方式,所以可以上傳多個(gè)文件.如：?name=iwen&age=20
  2.x-www-form-urlencoded格式：
    就是application/x-www-from-urlencoded,會將表單內(nèi)的數(shù)據(jù)轉(zhuǎn)換為鍵值對,比如 : name=Java&age = 23
如：{name:“iwen”,age:20}

• qs

qs是vue項(xiàng)目自帶，無需安裝，但要引入

//可以在main.js內(nèi)全局引入和獲取對象
import qs from 'qs'

Vue.prototype.qs = qs
qs是用來做序列化的，JSON.stringify也是做序列化處理的，但你要知道他們序列化的結(jié)果是不一樣的。

var a = {b:1,c:2}
qs-->"b=1&c=2"（這個(gè)叫query字符串嗎）
JSON.stringify: {"b":1,"c":2}（json字符串）

• element

//下載
npm i element-ui -S
------------------------------------------------------------------------------------------------------------------------------------------
//按需引用需要使用到的組件
npm install babel-plugin-component -D

//然后，修改.babelrc ，將下面加入到plugins對象的最后一個(gè)參數(shù)中：（根據(jù)element文檔來，可能有更新）
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
------------------------------------------------------------------------------------------------------------------------------------------
//按需引入要用的模塊，可直接放在main.js，模塊名參考element文檔
import { Button, Select } from 'element-ui';

//使用，可直接放在main.js
Vue.use(Button)
------------------------------------------------------------------------------------------------------------------------------------------
//路徑2：全局引入
import ElementUI from 'element-ui'  //手動變紅
import '../node_modules/element-ui/lib/theme-chalk/index.css'   //手動變紅

Vue.use(ElementUI)

• vuex
  vuex相當(dāng)于設(shè)置全局變量，而且也是可以實(shí)時(shí)多個(gè)頁面數(shù)據(jù)共享

如果只傳一個(gè)值，完全可以不用vuex（太浪費(fèi)），可這樣

//main.js中注冊Vue時(shí)添加變量
new Vue({
      el: '#app', router, store,
      template: '<App/>',
      components: {
            App
      },
        data () {
            return {
              modoleType: modoleType    //初始化modoleType
            }
    }
//其它頁面這樣調(diào)用
console.log(this.$root.$data.modoleType);

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式
這個(gè)狀態(tài)自管理應(yīng)用包含以下3個(gè)部分：
state，驅(qū)動應(yīng)用的數(shù)據(jù)源；
view，以聲明方式將 state 映射到視圖；
actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。

//安裝
npm install vuex --save
//引入
import Vuex from 'vuex'
//使用
Vue.use(Vuex)
//main.js創(chuàng)建一個(gè)store倉庫
const store = new Vuex.Store({
    state:{ //每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）?！皊tore”基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。
        count:10
    },
    mutations:{ //更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation
        increment(state){
            state.count++;
        }
    }
});
//記得創(chuàng)建Vue實(shí)例時(shí)引入store
new Vue({
  el: '#app',
  router,
  store,  //必須放進(jìn)實(shí)例中
  components: { App },
  template: '<App/>'
})
//其它頁面就可以調(diào)用了
this.$store.commit('increment')  //其它頁面調(diào)用store的mutation內(nèi)方法，必須用.commit();
return this.$store.state.count; //其它頁面調(diào)用store的state屬性

main.js創(chuàng)建一個(gè)同級目錄store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//創(chuàng)建一個(gè)store倉庫
export default new Vuex.Store({
    state:{ //每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）?！皊tore”基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。
        count:10
    },
    mutations:{ //更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation,必須是同步操作，//沒有網(wǎng)絡(luò)請求和其它異步操作可以直接用mutations
        increment(state){
            state.count++;
        },
        decrease(state){
            state.count--;
        }
    },
    //Action 類似于 mutation，不同在于：
    //1 Action 提交的是 mutation，而不是直接變更狀態(tài)。
    //2 Action 可以包含任意異步操作。
    actions:{  //有網(wǎng)絡(luò)請求必須用actions，要異步嘛
        increment(context){ //可以設(shè)置名稱和mutations對應(yīng)的方法相同的名稱
            context.commit("increment");
        },
        decrease(context){  //可以包含任意異步操作。
            setTimeout(()=>{
                context.commit('decrease');
            },1000);
//context.commit('decrease');
        }
    },
    getters:{ //對state數(shù)據(jù)進(jìn)行計(jì)算，Vuex 允許我們在 store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算。
        getState(state){
            return state.count>0?state.count:0;
        }
    }
});

然后在main.js引用和在實(shí)例引用

import store from './store'

new Vue({
  el: '#app',
  router,
  store,  //必須放進(jìn)實(shí)例中
  components: { App },
  template: '<App/>'
})

其它頁面調(diào)用數(shù)據(jù)demo

<template>
  <div class="hello">
    <button @click="geta">+</button>
    {{getc}}
    <button @click="getb">-</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    geta(){
        console.log(111);
        this.$store.dispatch('increment');
    },
    getb(){
        console.log(222);
        this.$store.dispatch('decrease');
        
    }
  },
  computed:{
    getc(){
        
        
        this.$store.commit('decrease');
        this.$store.commit('increment')  //其它頁面調(diào)用store的mutation內(nèi)方法，必須用.commit();
        
        //return this.$store.state.count; //其它頁面調(diào)用store的state屬性
        return this.$store.getters.getState; //
    }
  }
}
</script>

• vux
  vux需要注意點(diǎn)擊按鈕的觸發(fā)要用@click.native,只用@click觸發(fā)不了

<x-button class="xbuttonView1" @click.native="greet()">下一步</x-button>

//用v-for="(item, key) in timeValue"循環(huán)，用:id="key" :value="item"綁定index和值，:key="item.index"綁定key
<checker class="checkerView" v-model="value7" default-item-class="demo2-item" v-for="(item, key) in timeValue" :key="item.index">
        <checker-item :id="key" :value="item" @click.native="changeTime">{{item}}</checker-item>
</checker>

• uuid
  生產(chǎn)隨機(jī)碼

//安裝
npm install uuid --save
//main.js引入
import uuid from 'uuid/v1'
//向Vue對象添加uuid的屬性和方法
Vue.prototype.uuid = uuid
//其它頁面使用方法
this.uuid()

• vee-validate
  表單驗(yàn)證

//安裝
npmpm installnst  vee-validate --save
//main.js引入
import VeeValidate from 'vee-validate';
//使用
Vue.use(VeeValidate);
//demo，其它頁面直接使用，v-validate指定，必須有name做綁定
<input v-validate="'required|email'" name="email" type="text">
<span>{{ errors.first('email') }}</span>

• md5加密

npm install js-md5
在需要加密的地方引入使用
import md5 from ‘js-md5’

md5(idcard+‘kaxinhehuoren’+phone+‘kaxinhehuoren’+name+‘kaxinhehuoren’)

12store保存本地
cnpm install store
在需要用到的地方引入
import store from ‘store’
設(shè)置
store.set(‘userInfo’, res.data.outData);
提取
store.get(‘user’)

3 注意點(diǎn)

• vue過濾器
  Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個(gè)地方：雙花括號插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號指示：

//在雙花括號中
{{ message | capitalize }}

//與data同級
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

//也可以在main.js里全局配置過濾器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

• router配置

//主要在src\router\index.js中配置路由，先引入地址
import IntegralManagement from '@/components/IntegralManagement/IntegralManagement'

//再在router里面配置信息
    routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/IntegralManagement',
      name: 'IntegralManagement',
      component: IntegralManagement
    }
  ]

//配置完后可調(diào)用下語句直接跳轉(zhuǎn)頁面
this.$router.push('/IntegralManagement')

//也可使用 <router-link> 映射路由
<router-link to="/IntegralManagement">IntegralManagement</router-link>

• Vue打包上線部署

在打包前還要在config文件夾中的index.js中設(shè)置一個(gè)路徑問題，不然會報(bào)錯，
在js中找到build:{assetsPublicPath:’/’}，默認(rèn)路徑是‘/’,需要加上’.’，寫成、’./’（一般正常編輯代碼是只進(jìn)行本步修改即可）。