像写 Angular 一样写 Vue


个人比较喜欢 TypeScript,写了一段时间 Angular,对其代码组织方式也比较满意,公司选择使用 Vue,所以研究一下用 TypeScript 开发 Vue,后来发现这样的开发方式比较像 Angular,所以就靠拢 Angular 做了个 DEMO,这里写一下配置方法。

初始化项目

vue-cli

首先使用 vue-cli 创建项目,为了与官方保持同步,使用官方推荐的模板就可以:

1
2
3
4
5
6
7
# 全局安装 vue-cli
$ yarn global add vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ yarn

vue-class-component

vue 官方提供了一个基于类的 vue 组件开发方式,代码组织方式非常像 Angular,而且官方开发的质量还是有保证的:

1
$ yarn add vue-class-component -D

TypeScript 支持

  1. 安装 typescript 包来支持 Typescript:
1
$ yarn add typescript @types/node -D
  1. 新建 tsconfig.json 配置 Typescript:
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
{
"compilerOptions": {
"noEmitOnError": true,
"noImplicitAny": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"types": [
"node"
],
"baseUrl": "",
"declaration": true,
"watch": true,
"skipLibCheck": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"lib": ["es2017", "es2015", "es2015.promise", "dom"],
"mapRoot": "./src",
"module": "esnext",
"moduleResolution": "node",
"outDir": "./dist",
"sourceMap": true,
"strict": true,
"target": "es5",
"typeRoots": [
"./node_modules/@types"
]
}
}
  1. 配置 tslint.json 配置 Typescript 规则:
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
{
"rules": {
"max-line-length": false,
"no-inferrable-types": true,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces"
],
"eofline": true,
"no-duplicate-variable": true,
"no-eval": true,
"no-arg": true,
"no-internal-module": true,
"no-trailing-whitespace": true,
"no-bitwise": true,
"no-unused-expression": true,
"no-var-keyword": true,
"one-line": [
true,
"check-catch",
"check-else",
"check-open-brace",
"check-whitespace"
],
"quotemark": [
true,
"single",
"avoid-escape"
],
"semicolon": [true, "always"],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"curly": true,
"variable-name": [
true,
"ban-keywords",
"check-format",
"allow-leading-underscore",
"allow-pascal-case"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}

Webpack 配置修改

为了支持 .ts 文件,还需要对 webpack 进行配置,首先要安装一些 webpack 编译器:

1
$ yarn add ts-loader -D

打开 build/webpack.bash.conf.js 对 webpack 配置做一些修改,讲以下规则添加到 module.rules 中用来编译 .ts 文件:

1
2
3
4
5
{
test: /\.ts$/,
loader: 'ts-loader',
include: [resolve('src'), resolve('test')]
},

entry.app./src/main.js 改为 ./src/main.ts.
resolve.extensions 中添加 .ts.

项目文件修改

文章目錄
  1. 1. 初始化项目
    1. 1.1. vue-cli
    2. 1.2. vue-class-component
  2. 2. TypeScript 支持
  3. 3. Webpack 配置修改
  4. 4. 项目文件修改
|