• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue2.0+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 配置

推荐网址: 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: {
    // ...
  }
};

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
基于typescript强大的nestjs框架试用发布时间:2022-07-18
下一篇:
Typescript默认参数和可选参数发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap