阿超 > 在vue中使用ts

在vue中使用ts

2022-01-03

前端

诚实的生活方式其实是按照自己身体的意愿行事，饿的时候才吃饭，爱的时候不必撒谎。——马尔克斯《霍乱时期的爱情》

官方文档：https://www.typescriptlang.org/docs/handbook/intro.html

首先找到中文文档：https://www.tslang.cn/samples/index.html

寻找到vue.js

image-20220103120155111

跳转过去后就是教程，我们跟着教程一步一步来

首先新建一个空项目

image-20220103121442100

然后新建src目录和components目录

1
2
3
4
typescript-vue-tutorial/
├─ dist/
└─ src/
   └─ components/

输入命令下载依赖

1
D:\file\projects\vue-ts-demo>cnpm install --save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler

很快就下载完毕

image-20220103121921145

然后初始化ts环境

1
tsc --init

可以看到多出了ts配置文件

image-20220103122054083

我们可以在这里看到全部配置，我们可以手动对齐进行更改

也可以直接使用官方提供的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

image-20220103122317184

然后我们再新建一个webpack.config.js到根目录下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var path = require('path')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

再到package.json中添加构建配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
	"devDependencies": {
		"css-loader": "^6.5.1",
		"ts-loader": "^9.2.6",
		"typescript": "^4.5.4",
		"vue": "^2.6.14",
		"vue-loader": "^15.9.8",
		"vue-template-compiler": "^2.6.14",
		"webpack": "^5.65.0",
		"webpack-cli": "^4.9.1"
	},
	"scripts": {
		"build": "webpack",
		"test": "echo \"Error: no test specified\" && exit 1"
	}
}

我尝试构建，但发现以下错误

image-20220103124616317

报错日常了属于是，仔细看，它说：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
D:\file\projects\vue-ts-demo>cnpm run build

> @ build D:\file\projects\vue-ts-demo
> webpack

[webpack-cli] 无效的 配置 对象. Webpack 已经 被 序列化了 使用 一个 配置 类 为 并 不 匹配 它的 API 模式.
 - configuration.devtool 应该 满足 表达式 "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   突破 变更 自从 webpack 5: 这个 devtool 选项 变得 更加 严格.
   Please strictly follow the order of the keywords in the pattern.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\achao\AppData\Roaming\npm-cache\_logs\2022-01-03T04_44_20_952Z-debug.log

所以我们将webpack.config.js中的configuration.devtool改为表达式中的eval-nosources-cheap-module-source-map

image-20220103130312281

再来，发现报错变了

它说是找不到这个文件

image-20220103130410439

那我们新建一个，这就是我们的主要ts文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// src/index.ts

import Vue from "vue";

let v = new Vue({
    el: "#app",
    template: `
    <div>
        <div>Hello {{name}}!</div>
        Name: <input v-model="name" type="text">
    </div>`,
    data: {
        name: "World"
    }
});

image-20220103130518049

添加完成之后我们再次构建，发现成功构建啦！

1
2
3
4
# 编译
cnpm run build
# 编译并热更新
npm run build -- --watch

image-20220103130607639

这里还有个警告，说我们缺少了mode属性

我们顺便加上

image-20220103131136245

image-20220103131145898

警告消失

image-20220103131207600

接下来我们添加一个组件到src/components下

image-20220103131332747

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// src/components/Hello.ts

import Vue from "vue";

export default Vue.extend({
    template: `
        <div>
            <div>Hello {{name}}{{exclamationMarks}}</div>
            <button @click="decrement">-</button>
            <button @click="increment">+</button>
        </div>
    `,
    props: ['name', 'initialEnthusiasm'],
    data() {
        return {
            enthusiasm: this.initialEnthusiasm,
        }
    },
    methods: {
        increment() { this.enthusiasm++; },
        decrement() {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
        },
    },
    computed: {
        exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    }
});

在index.ts中引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/index.ts

import Vue from "vue";
import HelloComponent from "./components/Hello";

let v = new Vue({
    el: "#app",
    template: `
    <div>
        Name: <input v-model="name" type="text">
        <hello-component :name="name" :initialEnthusiasm="5" />
    </div>
    `,
    data: { name: "World" },
    components: {
        HelloComponent
    }
});

注意到此为止我们都是使用ts文件进行编写vue代码，如果我们需要使用vue文件，则需要在src下新建vue-shims.d.ts

1
2
3
4
5
6
// src/vue-shims.d.ts

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

我们的组件就可以改为Hello.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- src/components/Hello.vue -->

<template>
    <div>
        <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
        <button @click="decrement">-</button>
        <button @click="increment">+</button>
    </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
    props: ['name', 'initialEnthusiasm'],
    data() {
        return {
            enthusiasm: this.initialEnthusiasm,
        }
    },
    methods: {
        increment() { this.enthusiasm++; },
        decrement() {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
        },
    },
    computed: {
        exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    }
});
</script>

<style>
.greeting {
    font-size: 20px;
}
</style>

image-20220103131804180

index.ts中HelloComponent我再给个后缀

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/index.ts

import Vue from "vue";
import HelloComponent from "./components/Hello.vue";

let v = new Vue({
    el: "#app",
    template: `
    <div>
        Name: <input v-model="name" type="text">
        <hello-component :name="name" :initialEnthusiasm="5" />
    </div>
    `,
    data: { name: "World" },
    components: {
        HelloComponent
    }
});

我们使用cnpm run build生成的build.js我们可以放到一个html中使用一下，看看效果

image-20220103133436616

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html>

<body>
    <div id="app"></div>
</body>

<script src="./dist/build.js"></script>

</html>

效果如下：

image-20220103133838475

但这和我们一般vue开发还有点差别，我们开发时应该还有热重载…

我们去修改下webpack.config.js

image-20220103134439850

然后重新运行cnpm run build -- --watch

然后我们打开页面http://127.0.0.1:8848/vue-ts-demo/index.html

我们修改后再次保存，就可以实时更新了