VUE开发时的一些思路参考

1、使用vue-cli脚手架进行开发

2、全局公用组件注册

背景：

开发一个后台系统，有大量模块使用到表格组件，复用性强，那么我们就可以在项目里全局注册一个公用组件，而不需要每个文件读取引用，直接使用。

实现步骤：

1.编写公用组件dataTable.vue

2.编写公用组件挂载js

import dataTable from './dataTable.vue';

const tableCompts = {
  install(Vue) {
    Vue.component('CommonTable', dataTable);
  },
};
export default tableCompts;

3.定位到main.js文件引入下面代码即可实现全局组件的注册

import CommonTable from './components/table/dataTable';
Vue.use(CommonTable );

3、axios请求封装

创建axios.js文件

import axios from 'axios';
// 允许cookie跨域
axios.defaults.withCredentials = true;
// 开发环境和生产环境的url切换,会拼接到请求时axios的url头部
axios.defaults.baseURL = process.env.API_ROOT;
// 设置默认请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; 
// http request拦截器
// 添加请求拦截器
axios.interceptors.request.use((config) => {
    // 在发送请求之前做些什么
    return config;
}, (error)=> {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// http respones拦截器
// 添加响应拦截器
axios.interceptors.response.use( (response)  => {
    // 对响应数据做点什么
    return response;
},  (error)=> {
    // 对响应错误做点什么
    return Promise.reject(error);
});
export default {
  // post请求
  post: (apiurl, data, responseType) => new Promise((resolve, reject) => {
    axios({ method: 'post', url: apiurl, data, responseType })
      .then((res) => {
        if ( res.status === 200 ) { resolve( res ) } else if ( res.status === 500 ) { reject( res.data ) };
      })
  }),
  // get请求
  get: (apiurl, params)  => new Promise((resolve, reject) => {
      axios({
        method: 'get', url: apiurl, params,
      }).then((res) => {
        if ( res.status === 200 ) { resolve( res ) } else if ( res.status === 500 ) { reject( res.data ) };
      })
  }),
};

到main.js配置

import axios from './axiosServer/axios'; // 引入
Vue.prototype.axios = axios; // 暴露到全局

使用

delUrl为请求地址,reqData为请求参数

this.axios.post(delUrl, reqData).then((res) => {
     // 请求成功
}).catch((error) => {
     // 请求异常
});

4、路由#问题

加上mode: 'history'

const router = new VueRouter({
  mode: 'history',
  routes: baseRoute,
});

nginx配置

location / {
  try_files $uri $uri/ /index.html;
}

5、进入路由之后定位到网页顶部,iview设置加载进度条

import Vue from 'vue';
import iView from 'iview';
import VueRouter from 'vue-router';

const router = new VueRouter({
  mode: 'history',
  routes: baseRoute,
});

router.beforeEach((to, from, next) => {
    iView.LoadingBar.start(); // iview设置加载进度条开始
    next();
});

router.afterEach(r => {
    iView.LoadingBar.finish(); // iview设置加载进度条结束
    window.scrollTo(0, 0); // 定位到网页顶部
});

6、路由404页面设置

当我们在地址栏随便输入路由的时候应该指定跳转到404页面

{
    path: '*', // 重点
    redirect: '/error', // 重定向到路由页面
}

7、自定义指令

main.js里面编写

Vue.directive('tableBtn', { // tableBtn自定义指令名
    // el: 元素   binding：元素属性
    bind(el, binding) {
       // code
       console.log(binding.value); // addBtn
    },
});

使用

<span v-table-btn="'addBtn'"></span>

五个生命周期（也叫钩子函数）

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。

8、改变对象或者数组数据并更新视图

this.$set(对象/数组,key值/index值,添加的值); // 添加数据
this.$delete(对象/数组,key值/index值); // 删除数据

9、使用$on和$emit实现兄弟传值

创建vue实例

eventBus.js

import Vue from 'vue'
export default new Vue()

使用$on挂载方法

import eventBus from '../eventBus'

// 生命周期mounted
mounted () {
    // 添加方法,data为兄弟组件传过来的值，如果是$once只会执行一次
    eventBus.$on('send', data => {
      this.bus = data
    })
},

使用$emit调用$on的方法实现传值

import eventBus from '../eventBus'
// 生命周期mounted
mounted () {
// 调用方法,第二个参数为发送的数据
    eventBus.$emit('send', '发送')
},

10、vue-router路由懒加载（解决vue项目首次加载慢）

第一种写法：

{
    path: '/index',
    name: '忘记密码',
    component: resolve => require(['@/page/home.vue'], resolve),
},

第二种写法：

{
  name: 'WorkTabChild',
  path: '/workTable/WorkTabChild',
  component: () => import('@/views/workTable/WorkTabChild/WorkTabChild.vue')
},

11、添加babel-polyfill 兼容浏览器支持ES6

下载

npm install --save babel-polyfill

下载依赖后再main.js（最顶部） 添加

import 'babel-polyfill';

12、axios在ie下的兼容性问题，引入es6-promise

下载

npm install es6-promise

在main.js引入

import promise from 'es6-promise';
promise.polyfill();

13、vue 路由守卫

全局前置守卫：路由跳转过程中

/**
 * @param {to} 将要去的路由
 * @param {from} 出发的路由
 * @param {next} 执行下一步
*/
router.beforeEach((to, from, next) => {
  // ...
})

全局后置钩子：在所有路由跳转结束的时候调用

router.afterEach((to, from) => {
  // ...
})

14、自定义组件v-model双向绑定和父子组件同步通信

父组件

<list v-model='test' ></list>

子组件

<template>
  <div>
    <ul>
      <li>{{'里面的值：'+ value}}</li> // 组件使用时有v-model属性，value初始传的‘what’ 不会被渲染，而是v-model绑定的test值被渲染，这儿value会被重新赋值为v-model绑定的test的值。
      <button @click="fn">里面改变外面</button>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      value: { // 必须要使用value
　　　　　default: '',
　　　　},
    },
    methods: {
      fn () {
        this.$emit('input', this.value+2) // 这儿必须用input 发送数据，发送的数据会被父级v-model=“test”接受到，再被value=test传回来。
      }
    }
  }

15、引入echarts

安装

npm install echarts --save

全局引入：mian.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

使用

const myChartContainer = document.getElementById('myChart'); 
// 初始化 
const myChart = this.$echarts.init(myChartContainer); 

// 添加loding效果 
myChart.showLoading(
{ 
   text: '正在读取数据中...', 
   effect: 'whirling', 
}
); 

// 绘制图表 
const optionMap = {...};
myChart.setOption(optionMap); 

// 取消loding效果 
myChart.hideLoading();

按需加载：main.js

// 按需引入echarts
const echarts = require('echarts/lib/echarts')
// 引入折线图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')
// 饼图
require('echarts/lib/component/dataset')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/scatter')
require('echarts/lib/chart/radar')
require('echarts/lib/chart/map')
require('echarts/lib/chart/tree')
require('echarts/lib/chart/treemap')
require('echarts/lib/chart/graph')
require('echarts/lib/chart/lines')
require('echarts/lib/component/axisPointer')
// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')// 图例
Vue.prototype.$echarts = echarts

16、引入normalize.css

安装

npm install --save normalize.css

使用:main.js引入

import 'normalize.css/normalize.css'

17、element-ui封装全局提示框等

main.js设置

Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$msgbox = MessageBox

新建一个util.js

const util = {}

// 成功提示框
util.successMessage = function (vm, content = '操作成功!') {
  vm.$message({
    message: content,
    type: 'success',
    duration: 2000
  })
}

// 异常消息框
util.errorMessage = function (vm, content = '操作失败') {
  vm.$message({
    message: content,
    type: 'error',
    duration: 2000
  })
}

// 删除弹框
util.DeleteModal = function (vm, text, callback) {
  vm.$confirm(`<h3>确认删除已选${text}？</h3>`, '请注意！', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    dangerouslyUseHTMLString: true
  }).then(() => {
    callback()
  })
}
export default util

使用

this.$util.DeleteModal(this, '个案数据', () => {
  this.$util.successMessage(this, '删除成功')
})

this.$util.errorMessage(this, '删除异常')

18、vue实例

this.$watch

// $watch 是一个实例方法
vm.$watch('b', function (newValue, oldValue) {//b是属性名，表示要监听的对象
    // 这个回调将在 `vm.b` 改变后调用
})

19、通过.sync子组件修改父组件data数据

父组件

<model :age.sync="age"/>

子组件

// 通过update:age更改
this.$emit('update:age', 999)

20、vue开发可用到的一些npm包

// 请求接口
axios

// axios在ie下的兼容性问题
es6-promise

// JavaScript 实用工具库
lodash  或者 underscore

// 开源的RSA加密解密的JS库
jsencrypt

// 虚拟滚动
vue-virtual-scroller

// 前端导出 读取表格数据
xlsx

// 兼容浏览器支持ES6
babel-polyfill

// 日期处理类库
moment
day.js

// vue拖拽插件
vuedraggable

// 在线代码编辑器
codemirror
vue-codemirror

// Web 富文本编辑器
wangeditor
vue-quill-editor

// 前端模块化
systemjs

// 轻量、实用和客户端级的前端日志记录工具
logline

// 微前端
single-spa
// 引入vue项目
single-spa-vue

// 微前端框架
qiankun

// vue中使用jsx，并使用v-model
babel-plugin-jsx-v-model

// json转yaml文件
json2yaml

// 开源的JS流程图绘图组件
jsplumb

// 前端下载利器兼容浏览器，a标签download属性有兼容性问题
file-saver

// 客户端接收服务端消息推送
sockjs-client

// vue支持ts写法
vue-class-component
vue-property-decorator