vue2.0+typeScript项目

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

https://segmentfault.com/a/1190000018720570#articleHeader15

https://segmentfault.com/a/1190000016423943

https://www.jianshu.com/p/fbcad30031c2

我的github项目地址： https://github.com/zhaofangmei/vue-typescript-demo.git

踩坑记：

1、配置完路由后,无法在组件中使用this.route和this. route和this.route和this.router（需要修改src目录下shims-vue.d.ts文件）

import Vue from 'vue';
import VueRouter, { Route } from 'vue-router';

declare module "*.vue" {
  export default Vue;
}

declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter; //这表示this下有这个东西
    $route: Route;
  }
}

2、在项目中使用vue+typescript的组合，但是mounte钩子没有触发

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { Route } from "vue-router";

@Component
export default class App extends Vue {
  private isShowNav: boolean = true;
  mounted(): void {
    console.log(11111111111);
    this.routeChange(this.$route, this.$route);
  }
  @Watch("$route")
  routeChange(val: Route, oldVal: Route): void {
    console.log(val, oldVal);
  }
}
</script>

3、项目安装了element-ui的依赖包，main.ts全局引入了，element-ui样式就是没有显示，引入不了（vue.config.js的css.modules设置为false）-- webpack 配置

const path = require("path");
const sourceMap = process.env.NODE_ENV === "development";

module.exports = {
  // 基本路径
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.mode = "production";
    } else {
      // 为开发环境修改配置...
      config.mode = "development";
    }

    Object.assign(config, {
      // 开发生产共同配置
      resolve: {
        extensions: [".js", ".vue", ".json", ".ts", ".tsx"],
        alias: {
          vue$: "vue/dist/vue.js",
          "@": path.resolve(__dirname, "./src"),
          "@c": path.resolve(__dirname, "./src/components"),
          less: path.resolve(__dirname, "./src/less"),
        }
      }
    });
  },
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: sourceMap,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === "darwin",
    host: "localhost",
    port: 3001, //8080,
    https: false,
    hotOnly: false,
    proxy: {
      // 设置代理
      // proxy all requests starting with /api to jsonplaceholder
      "/api": {
        target: "http://localhost:3000/",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    },
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
};