1.vue项目-base

vue项目全了解

1.创建vue项目

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.安装初始项目vue init webpack + 项目名称

     vue init webpack vue-base-demo

3.成功之后，安装项目依赖：

 cnpm install

2.安装项目常用插件

• axios

  为什么要用axios?
  axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
  从浏览器中创建 XMLHttpRequest，    从 node.js 发出 http 请求，支持 Promise API，拦截请求和响应，转换请求和响应数据，取消请求，自动转换JSON数据，客户端支持防止CSRF/XSRF。
  

//安装
npm install axios --save

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

//再main.js获取axios对象
Vue.prototype.axios = axios

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

// 在main.js添加可以全局拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

注意：
axios的post请求只接收form-data格式：
  1.form-data格式：
    就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以 上传键值对,也可以上传文件.当上传的字段是文件时会有Content-Type来表名文件类型;content-disposition用 来说明字段的一些信息;
    由于有boundary隔离,所以multipart/form-data既可以上传文件也可以上传键值对,它采用了键值对的方式,所以可以上传多个文件.如：?name=iwen&age=20
  2.x-www-form-urlencoded格式：
    就是application/x-www-from-urlencoded,会将表单内的数据转换为键值对,比如 : name=Java&age = 23
如：{name:“iwen”,age:20}

---

• qs

qs是vue项目自带，无需安装，但要引入

//可以在main.js内全局引入和获取对象
import qs from 'qs'

Vue.prototype.qs = qs
qs是用来做序列化的，JSON.stringify也是做序列化处理的，但你要知道他们序列化的结果是不一样的。

var a = {b:1,c:2}
qs-->"b=1&c=2"（这个叫query字符串吗）
JSON.stringify: {"b":1,"c":2}（json字符串）

---

• element

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

//然后，修改.babelrc ，将下面加入到plugins对象的最后一个参数中：（根据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相当于设置全局变量，而且也是可以实时多个页面数据共享

如果只传一个值，完全可以不用vuex（太浪费），可这样

//main.js中注册Vue时添加变量
new Vue({
	  el: '#app', router, store,
	  template: '<App/>',
	  components: {
	        App
	  },
		data () {
		    return {
		      modoleType: modoleType    //初始化modoleType
		    }
	}
//其它页面这样调用
console.log(this.$root.$data.modoleType);

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
这个状态自管理应用包含以下3个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

//安装
npm install vuex --save
//引入
import Vuex from 'vuex'
//使用
Vue.use(Vuex)
//main.js创建一个store仓库
const store = new Vuex.Store({
	state:{	//每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
		count:10
	},
	mutations:{ //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
		increment(state){
			state.count++;
		}
	}
});
//记得创建Vue实例时引入store
new Vue({
  el: '#app',
  router,
  store,  //必须放进实例中
  components: { App },
  template: '<App/>'
})
//其它页面就可以调用了
this.$store.commit('increment')  //其它页面调用store的mutation内方法，必须用.commit();
return this.$store.state.count; //其它页面调用store的state属性

main.js创建一个同级目录store/index.js

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

Vue.use(Vuex)

//创建一个store仓库
export default new Vuex.Store({
	state:{	//每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
		count:10
	},
	mutations:{ //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,必须是同步操作，//没有网络请求和其它异步操作可以直接用mutations
		increment(state){
			state.count++;
		},
		decrease(state){
			state.count--;
		}
	},
	//Action 类似于 mutation，不同在于：
	//1 Action 提交的是 mutation，而不是直接变更状态。
	//2 Action 可以包含任意异步操作。
	actions:{  //有网络请求必须用actions，要异步嘛
		increment(context){ //可以设置名称和mutations对应的方法相同的名称
			context.commit("increment");
		},
		decrease(context){  //可以包含任意异步操作。
			setTimeout(()=>{
				context.commit('decrease');
			},1000);
//context.commit('decrease');
		}
	},
	getters:{ //对state数据进行计算，Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
		getState(state){
			return state.count>0?state.count:0;
		}
	}
});

然后在main.js引用和在实例引用

import store from './store'

new Vue({
  el: '#app',
  router,
  store,  //必须放进实例中
  components: { App },
  template: '<App/>'
})

其它页面调用数据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')  //其它页面调用store的mutation内方法，必须用.commit();
  		
  		//return this.$store.state.count; //其它页面调用store的state属性
  		return this.$store.getters.getState; //
  	}
  }
}
</script>

---

• vux
  vux需要注意点击按钮的触发要用@click.native,只用@click触发不了

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

//用v-for="(item, key) in timeValue"循环，用: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
  生产随机码

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

---

• vee-validate
  表单验证

//安装
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’
设置
store.set(‘userInfo’, res.data.outData);
提取
store.get(‘user’)

---

3 注意点

• vue过滤器
  Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

//在双花括号中
{{ 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
    }
  ]

//配置完后可调用下语句直接跳转页面
this.$router.push('/IntegralManagement')

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

---

• Vue打包上线部署

在打包前还要在config文件夹中的index.js中设置一个路径问题，不然会报错，
在js中找到build:{assetsPublicPath:’/’}，默认路径是‘/’,需要加上’.’，写成、’./’（一般正常编辑代码是只进行本步修改即可）。