vue-cli3.0 +typescript 搭建项目

安装

image.png

全局安装

npm install -g @vue/cli

查看版本

npm -V

如果之前安装了3.0以下的，需要先卸载

npm uninstall -g vue-cli

安装过程

• m1

  
  dos命令.png
• m2

vue ui

UI界面.png

vue.config.js的配置

vue.config.js相关配置

路由

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

const Index = () => import('./views/index.vue');
const EarlyWarningMan = () => import('./views/earlyWarningMan/earlyWarningMan.vue');
const ProductPublicOpinion = () => import('./views/publicOpinionMonitoring/product_public_opinion.vue');
const Login = () => import('./views/login.vue');

export default new Router({
  mode: 'history',
  // base: '/weima/',
  routes: [
    {
      path: '/',
      redirect: '/index',
    },
    {
      path: '/index',
      name: 'index',
      component: Index,
    },
    {
        path: '/product',
        name: 'ProductPublicOpinion',
        component: ProductPublicOpinion,
    },
    {
      path: '/earlyWarningMan',
      name: 'earlyWarningMan',
      component: EarlyWarningMan,
    }
  ]
});

装饰器

https://github.com/kaorun343/vue-property-decorator

vue class component 是vue 官方出的
vue property decorator 是社区出的
其中vue class component 提供了 vue component 等等
vue property decorator 深度依赖了 vue class component 拓展出了很多操作符 @Prop @Emit @Inject 等等 可以说是 vue class component 的一个超集
正常开发的时候 你只需要使用 vue property decorator 中提供的操作符即可 不用再从vue class componen 引入vue component

axios以及登录拦截

基于promise用于浏览器和node.js的http客户端

axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.withCredentials = true;

// 全局设置post请求
axios.interceptors.request.use((config) => {
  let method: any = config.method;
  let data = config.data;
  if (method.toLocaleLowerCase() === 'post') {
    config.data = data;
  }
  return config
}, (error) => Promise.reject(error));



// 全局拦截token失效
axios.interceptors.response.use((res) => {
  let data: any = res.data;
  const { NODE_ENV } = process.env;
  // 如果token失效
  if (data.result.status === 400 && NODE_ENV === 'production') {
    location.href = '/login';
  } else if (data.result.status === 'OK' && data.result.code === '2000') {
    Promise.resolve(data.data);
  } else {
    // this.$message.error(data.result.message);
  }
  return data;
}, error => {
  Promise.reject(error);
  // vm.$message.error('网络错误，请稍后重试');
})

vuex

相比vue-cli3.0以下的不同

安装命令的不同

npm install vue-cli -g　
vue init webpack my-app
npm install 
cd my-app
npm run dev