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: '',
      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: ''
})
//其它页面就可以调用了
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: ''
})

其它页面调用数据demo





  • 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:’/’},默认路径是‘/’,需要加上’.’,写成、’./’(一般正常编辑代码是只进行本步修改即可)。

你可能感兴趣的:(1.vue项目-base)