vue init webpack '项目名称'
cnpm i typescript ts-loader --save-dev
注意:这两个是配置typescript必须的文件,后面一步一步深刻咱们会安装更多插件。vue
打开build/webpack.base.config.jsnode
entry: { app: './src/main.ts' // 修改main.js 为main.ts后面会提到main.ts } resolve: { ... extensions: ['.js', '.ts', '.tsx', '.vue', '.json'] // 新增ts tsx ... }, module: { rules: [ { test: /\.ts$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader' }, { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } }, ] // 添加ts、tsx解析配置
{ "include": [ "./src/**/*" ], "exclude": [ "node_modules" ], "compilerOptions": { "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "strict": true, "allowJs": true, "module": "es2015", "target": "es5", "moduleResolution": "node", "isolatedModules": true, "lib": [ "dom", "es5", "es2015.promise" ], "sourceMap": true, "pretty": true } }
declare module "*.vue" { import Vue from "vue"; export default Vue; }
main.js => main.ts
router/index.js => index.ts
main.ts中 import App from './App' => import App from './App.vue' router/index.js中 import HelloWorld from '@/components/HelloWorld' 修改成 import Helloworld from '@/components/HellowWorld.vue'
注意:原来import的文件都必须加上.vue后缀webpack
<script lang="ts"> import Vue from 'vue' export default Vue.extend({ name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } }) </script>
这里作了初步修改,后面咱们会使用插件vue-class-component进行修改,若是写过angular2+那么就很容易上手git
npm run dev
若是运气好,那么项目就这么启动了。github
问题1:web
vue typescript Module build failed: Error: You may be using an old version of webpack; please check you're using at least version 4
解决:package.json 中修改ts-loader版本为3.5,而后cnpm install 最后从新启动 npm run dev 就行了。vuex
问题2:typescript
TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
解决:.tsconfig.json 中缺乏配置 "experimentalDecorators": truenpm
cnpm i vue-class-component --save-dev
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script lang="ts"> import Vue from 'vue' import Component from 'vue-class-component' @Component({ // 属性 props props: { propMessage: String } }) export default class HelloWorld extends Vue { // data 初始化变量 msg: string = 'typescript learn' list: string[] = [] // hook 生命周期函数 mounted () { console.log('mounted') } // computed 计算属性 get computedMsg () { return this.msg + 'computed' } set computedMsg (val) { console.log(val) } // method 方法 showList () { this.list.push('nihao') } } </script> <style scoped> </style>
插件地址:https://github.com/vuejs/vue-...
github项目地址:https://github.com/zxc1989092...json
cnpm i vue-property-decorator --save-dev
github地址:https://github.com/kaorun343/...
待续......