vue项目实战经验汇总

<a v-on:[eventName]="doSomething"> ... </a>复制代码

<Tag @click.native="handleClick">ok</Tag>复制代码

<input type="text" v-model.trim="value">复制代码

<template>    <div>       <ComponentA />       <ComponentB />    </div></template><script>const ComponentA = () => import('./ComponentA')const ComponentB = () => import('./ComponentB')export default {    // ...    components: {    ComponentA,    ComponentB    },    // ...}</script>复制代码

<template>    <div>       <ComponentA />    </div></template><script>const ComponentA = resolve => require(['./ComponentA'], resolve)export default {    // ...    components: {    ComponentA    },    // ...}</script>复制代码

const store = new Vuex.Store({  state: {    todos: [      { id: 1, text: '...', done: true },      { id: 2, text: '...', done: false }    ]  },  getters: {    doneTodos: state => {      return state.todos.filter(todo => todo.done)    }  }})// 访问getters里的属性this.$store.getters.doneTodos复制代码

const store = new Vuex.Store({  state: {    num: 1  },  mutations: {    add (state) {      // 变更状态      state.num++    }  }}) // 在项目中使用mutationstore.commit('add')// 添加额外参数store.commit('add', 10)复制代码

const store = new Vuex.Store({  state: {    num: 0  },  mutations: {    add (state) {      state.num++    }  },  actions: {    add (context) {      context.commit('add')    },    asyncAdd ({ commit }) {    setTimeout(() => {      commit('add')    }  }})// 分发actionstore.dispatch('add')// 异步actionstore.dispatch('asyncAdd')// 异步传参store.dispatch('asyncAdd', { num: 10 })复制代码

// type.ts// 用来定义state等的类型文件export interface State {    name: string;    isLogin: boolean;    config: Config;    [propName: string]: any;  // 用来定义可选的额外属性} export interface Config {    header: HeaderType,    banner: Banner,    bannerSider: BannerSider,    supportPay: SupportPay} export interface Response {    [propName: string]: any;} // state.ts// 定义全局状态import { State } from './type'export const state: State = {    name: '',    isLogin: false,    curScreen: '0', // 0为pc， 1为移动    config: {        header: {            columns: ['首页', '产品', '技术', '运营', '商业'],            height: '50',            backgroundColor: '#000000',            logo: ''        }    },    // ...    articleDetail: null};// mutation.tsimport {    State,    Config,    HeaderType,    Banner,    BannerSider,    SupportPay} from './type'export default {    // 预览模式    setScreen(state: State, payload: string) {        state.curScreen = payload;    },    // 删除banner图    delBanner(state: State, payload: number) {        state.config.banner.bannerList.splice(payload, 1);    },    // 添加banner图    addBanner(state: State, payload: object) {        state.config.banner.bannerList.push(payload);    },    // ...};// action.tsimport {    HeaderType,    Response } from './type'import http from '../utils/http'import { uuid, formatTime } from '../utils/common'import { message } from 'ant-design-vue'export default {    /**配置 */    setConfig(context: any, paylod: HeaderType) {        http.get('/config/all').then((res:Response) => {            context.commit('setConfig', res.data)        }).catch((err:any) => {            message.error(err.data)        })    },    /**header */    saveHeader(context: any, paylod: HeaderType) {        http.post('/config/setHeader', paylod).then((res:Response) => {            message.success(res.data)            context.commit('saveHeader', paylod)        }).catch((err:any) => {            message.error(err.data)        })    },    // ...};// index.tsimport Vue from 'vue';import Vuex from 'vuex';import { state } from './state';import mutations from './mutation';import actions from './action';Vue.use(Vuex);export default new Vuex.Store({  state,  mutations,  actions});// main.ts// 最后挂载到入口文件的vue实例上import Vue from 'vue';import App from './App.vue';import router from './router';import store from './store/';import './component-class-hooks';import './registerServiceWorker';Vue.config.productionTip = false;new Vue({  router,  store,  render: (h) => h(App),}).$mount('#app');复制代码

// router.tsimport Vue from 'vue';import Router from 'vue-router';import Home from './views/admin/Home.vue'; Vue.use(Router); const router =  new Router({  mode: 'history',  base: process.env.BASE_URL,  routes: [    {      path: '/',      component: Home,      beforeEnter: (to, from, next) => {        next();      },      children: [        {          // 当 /user/:id/profile 匹配成功，          // UserProfile 会被渲染在 User 的 <router-view> 中          path: '',          name: 'header',          component: () => import(/* webpackChunkName: "header" */ './views/admin/subpage/Header.vue'),        },        {          path: '/banner',          name: 'banner',          component: () => import(/* webpackChunkName: "banner" */ './views/admin/subpage/Banner.vue'),        },        {          path: '/admin',          name: 'admin',          component: () => import(/* webpackChunkName: "admin" */ './views/admin/Admin.vue'),        },      ],    },    {      path: '/login',      name: 'login',      component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),      meta:{        keepAlive:false //不需要被缓存的组件      }    },    {      path: '*',      name: '404',      component: () => import(/* webpackChunkName: "404" */ './views/404.vue'),    },  ],});// 路由导航钩子的用法router.beforeEach((to, from, next) => {  if(from.path.indexOf('/preview') < 0) {    sessionStorage.setItem('prevToPreviewPath', from.path);  }  next();})export default router复制代码

// routes 配置export default [  {    path: '/A',    name: 'A',    component: A,    meta: {      keepAlive: true // 需要被缓存    }  }, {    path: '/B',    name: 'B',    component: B,    meta: {      keepAlive: false // 不需要被缓存    }  }]复制代码

// 路由设置<keep-alive>    <router-view v-if="$route.meta.keepAlive">        <!-- 会被缓存的视图组件-->    </router-view></keep-alive> <router-view v-if="!$route.meta.keepAlive">    <!-- 不需要缓存的视图组件--></router-view>复制代码  

<template>  <div id="app">    <keep-alive>      <router-view :key="key" />    </keep-alive>  </div></template> <script lang="ts">import { Vue } from 'vue-property-decorator';import Component from 'vue-class-component';@Componentexport default class App extends Vue {  get key() {    // 缓存除预览和登陆页面之外的其他页面    console.log(this.$route.path)    if(this.$route.path.indexOf('/preview') > -1) {      return '0'    }else if(this.$route.path === '/login') {      return '1'    }else {      return '2'    }  }}</script>复制代码

/** * 识别ie--浅识别 */export const isIe = () => {    let explorer = window.navigator.userAgent;        //判断是否为IE浏览器    if (explorer.indexOf("MSIE") >= 0) {        return true;    }else {        return false    }}复制代码

/** * 颜色转换16进制转rgba * @param {String} hex * @param {Number} opacity */export function hex2Rgba(hex, opacity) {	if(!hex) hex = "#2c4dae";    return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + "," + (opacity || "1") + ")";}复制代码

// 去除html标签export const htmlSafeStr = (str) => {    return str.replace(/<[^>]+>/g, "")}复制代码

/* 获取url参数 */export const getQueryString = () => {    let qs = location.href.split('?')[1] || '',        args = {},        items = qs.length ? qs.split("&") : [];        items.forEach((item,i) => {            let arr = item.split('='),                name = decodeURIComponent(arr[0]),                value = decodeURIComponent(arr[1]);                name.length && (args[name] = value)        })    return args;}复制代码

/* 解析url参数 */export const paramsToStringify = (params) => {    if(params){        let query = [];        for(let key in params){            query.push(`${key}=${params[key]}`)        }        return `${query.join('&')}`    }else{        return ''    }}复制代码

export const toArray = (data) => {    return Array.isArray(data) ? data : [data]}复制代码

/** *  带参数跳转url（hash模式） * @param {String} url * @param {Object} params */export const toPage = (url, params) => {    if(params){        let query = [];        for(let key in params){            query.push(`${key}=${params[key]}`)        }        window.location.href = `./index.html#/${url}?${query.join('&')}`;    }else{        window.location.href = `./index.html#/${url}`;    }}复制代码

/** * 指定字符串 溢出显示省略号 * @param {String} str * @param {Number} num */export const getSubStringSum = (str = "", num = 1) => {    let newStr;    if(str){        str = str + '';        if (str.trim().length > num ) {            newStr = str.trim().substring(0, num) + "...";        } else {            newStr = str.trim();        }    }else{        newStr = ''    }    return newStr;}复制代码

/** * 生成uuid * @param {number} len 生成指定长度的uuid * @param {number} radix uuid进制数 */export function uuid(len, radix) {    let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');    let uuid = [], i;    radix = radix || chars.length;     if (len) {      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];    } else {      let r;       uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';      uuid[14] = '4';       for (i = 0; i < 36; i++) {        if (!uuid[i]) {          r = 0 | Math.random()*16;          uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];        }      }    }     return uuid.join('');}复制代码

/** * 生成指定格式的时间 * @param {*} timeStemp 时间戳 * @param {*} flag 格式符号 */export function formatTime(timeStemp, flag) {    let time = new Date(timeStemp);    let timeArr = [time.getFullYear(), time.getMonth() + 1, time.getDate()];    return timeArr.join(flag || '/')}复制代码

import axios from 'axios'import qs from 'qs' // 请求拦截axios.interceptors.request.use(config => {  // 此处可以封装一些加载状态  return config}, error => {  return Promise.reject(error)}) // 响应拦截axios.interceptors.response.use(response => {  return response}, error => {  return Promise.resolve(error.response)}) function checkStatus (response) {  // 此处可以封装一些加载状态  // 如果http状态码正常，则直接返回数据  if(response) {    if (response.status === 200 || response.status === 304) {      return response.data      // 如果不需要除了data之外的数据，可以直接 return response.data    } else if (response.status === 401) {      location.href = '/login';    } else {      throw response.data    }  } else {    throw {data:'网络错误'}  }  } // axios默认参数配置axios.defaults.baseURL = '/api/v0';axios.defaults.timeout = 10000; // restful API封装export default {  post (url, data) {    return axios({      method: 'post',      url,      data: qs.stringify(data),      headers: {        'X-Requested-With': 'XMLHttpRequest',        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'      }    }).then(      (res) => {        return checkStatus(res)      }    )  },  get (url, params) {    return axios({      method: 'get',      url,      params, // get 请求时带的参数      headers: {        'X-Requested-With': 'XMLHttpRequest'      }    }).then(      (res) => {        return checkStatus(res)      }    )  },  del (url, params) {    return axios({      method: 'delete',      url,      params, // get 请求时带的参数      headers: {        'X-Requested-With': 'XMLHttpRequest'      }    }).then(      (res) => {        return checkStatus(res)      }    )  }}复制代码

<template>
    <div>
        <a-upload
            :action="action"
            listType="picture-card"
            :fileList="fileList"
            @preview="handlePreview"
            @change="handleChange"
            :remove="delFile"
            :data="data"
            >
            <template v-if="!fileList.length && defaultValue">
                <img :src="defaultValue" alt="" style="width: 100%">
            </template>
            <template v-else>
                <div v-if="fileList.length < 2">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">上传</div>
                </div>
            </template>
        </a-upload>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
    </div>   
</template>
 
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component
export default class Upload extends Vue {
  @Prop({ default: 'https://www.mocky.io/v2/5cc8019d300000980a055e76' })
  action!: string;
 
  @Prop()
  defaultValue: string;
 
  @Prop()
  data: object;
 
  @Prop({ default: function() {} })
  onFileDel: any;
 
  @Prop({ default: function() {} })
  onFileChange: any;
 
  public previewVisible: boolean =  false;
  public previewImage: string =  '';
  public fileList: object[] = [];
  // 预览图片
  public handlePreview(file: any) {
    this.previewImage = file.url || file.thumbUrl;
    this.previewVisible = true;
  }
  
  // 删除文件和回调
  public delFile(file: any) {
    this.fileList = [];
    this.onFileDel();
  }
  // 文件上传变化的处理函数
  public handleChange({ file }: any) {
    this.fileList = [file];
    if(file.status === 'done') {
      this.onFileChange(file.response.url);
    } else if(file.status === 'error') {
      this.$message.error(file.response.msg)
    }
  }
  // 取消预览
  public handleCancel() {
      this.previewVisible = false;
  }
}
</script>