vue2.0+typeScript项目

风大不出门 發表於 2019-10-24 15:41:00

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（需要修改<code>src</code>目录下<code>shims-vue.d.ts</code>文件）
<div class="cnblogs_code">
<pre>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;
}
}</pre>
</div>
2、在项目中使用vue+typescript的组合，但是mounte钩子没有触发
<div class="cnblogs_code">
<pre><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></pre>
</div>
 3、项目安装了element-ui的依赖包，main.ts全局引入了，element-ui样式就是没有显示，引入不了（vue.config.js的css.modules设置为false）-- <code>webpack 配置</code>
推荐网址： https://cli.vuejs.org/zh/config/#css-modules
<div class="cnblogs_code">
<pre>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: {
// ...
}
};</pre>
</div>
 
 
  
来源：https://www.cnblogs.com/zhaomeizi/p/11732597.html

頁: [1]

琼殿技术论坛's Archiver

vue2.0+typeScript项目