第一步
新建一个文件夹,命名为ts
进入ts文件夹,在当前目录打开命令行
第二步
执行npm init初始化项目
第三步
配置package.json文件,安装项目所需要的依赖
这里需要注意一个问题,这三个包的版本都会对整个项目是否能启动有很大的影响,在命令行执行npm install 安装依赖。
第四步
创建webpack.config.js 内容如下
var path = require('path')
var webpack = require('webpack')
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: {
css: 'vue-style-loader!css-loader',
less: 'vue-style-loader!css-loader!less-loader'
},
}
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
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'
}
注:如果是vue-loader@15版本以上的,必须引入vue Plugin
第五步
创建入口文件index.ts和首页index.html
index.html
<!doctype html>
<html>
<head></head>
<body>
<div id="app"></div>
</body>
<script src="./dist/build.js"></script>
</html>
index.ts
import Vue from "vue";
import HelloComponent from "./components/Hello.vue";
import HelloDecoratorComponent from "./components/HelloDecorator.vue";
let v = new Vue({
el: "#app",
template: `
<div>
Name: <input v-model="name" type="text">
<hello-component :name="name" :initialEnthusiasm="5" />
<h1>Hello Decorator Component</h1>
<hello-decorator-component :name="name" :initialEnthusiasm="5" />
</div>
`,
data: { name: "World" },
components: {
HelloComponent,
HelloDecoratorComponent
}
});
在入口文件index.ts中,我们新建了一个vue对象,引入了两个用ts写的组件HelloComponent, HelloDecoratorComponent
第六步
创建文件夹components,在文件夹下新建两个文件Hello.vue,HelloDecorator.vue
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(): void { this.enthusiasm++; },
decrement(): void {
if (this.enthusiasm > 1) {
this.enthusiasm--;
}
},
},
computed: {
exclamationMarks(): string {
return Array(this.enthusiasm + 1).join('!');
}
}
});
</script>
<style>
.greeting {
font-size: 20px;
}
</style>
在这里,为了使代码更符合ES6 class的写法,我们引入vue-property-decorator包,创建HelloDecorator.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, Component, Prop } from "vue-property-decorator";
@Component
export default class HelloDecorator extends Vue {
// 申明父级属性
@Prop() name!: string;
@Prop() initialEnthusiasm!: number;
//申明组件内部变量
enthusiasm = this.initialEnthusiasm;
// 申明methods方法
increment(): void {
this.enthusiasm++;
}
decrement(): void {
if (this.enthusiasm > 1) {
this.enthusiasm--;
}
}
// 申明computed方法
get exclamationMarks(): string {
return Array(this.enthusiasm + 1).join('!');
}
}
</script>
<style>
.greeting {
font-size: 20px;
}
</style>
注:这段代码系统无法识别为JavaScript,所以代码样式并没有显示
第七步
我们加入tslint.json和tsconfig.json配置文件,前者是对ts文件的代码校验,后者指定了用来编译这个项目的根文件和编译选项
tslint.json
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {
"quotemark": [
true,
"single"
],
"indent": [
true
],
"interface-name": [
false
],
"arrow-parens": false,
"object-literal-sort-keys": false
},
"rulesDirectory": []
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"experimentalDecorators": true
},
"include": [
"./src/**/*"
]
}