vue3.0+typeScript項目

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 配置

推薦網址： https://cli.vuejs.org/zh/config/#css-modules

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: {
    // ...
  }
};