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: '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: '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: '- vux
vux需要注意点击按钮的触发要用@click.native,只用@click触发不了
下一步
//用v-for="(item, key) in timeValue"循环，用:id="key" :value="item"绑定index和值，:key="item.index"绑定key
{{item}}
- 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做绑定
{{ errors.first('email') }}
- 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')
//也可使用 映射路由
IntegralManagement
- Vue打包上线部署
在打包前还要在config文件夹中的index.js中设置一个路径问题，不然会报错，
在js中找到build:{assetsPublicPath:’/’}，默认路径是‘/’,需要加上’.’，写成、’./’（一般正常编辑代码是只进行本步修改即可）。