vue ts环境搭建及ts格式写法

1、搭建环境
	方式一:
		vue ui手动配置->添加项目->手动配置
		->添加Babel、Typescript、使用配置文件,其他选择自定义
		->选择css预处理器和Eslint
	
	方式二:手动传键
		(1)下载
			cnpm install -D vue 无需下载@types文件
			
		(2)编写vue声明文件,避免导入vue组件报错
			declare module '*.vue' {
			    import Vue from 'vue'
			    export default Vue	导出Vue构造器
			}
		(3)配置webpack
			const HtmlWebpackPlugin = require('html-webpack-plugin')
			const VueLoaderPlugin = require('vue-loader/lib/plugin')
			
			module.exports = {
			    entry: {
			        'app': './src/index.ts'
			    },
			    output: {
			        filename: '[name].[chunkhash:8].js'
			    },
			    resolve: {
			        extensions: ['.js', '.ts', '.tsx', 'vue'],
			        alias: {
			            'vue': 'vue/dist/vue.esm.js'	 引入能解析template的完整es6版本
			        }
			    },
			    module: {
			        rules: [
			            {
			                test: /\.vue$/,
			                loader: 'vue-loader'
			            },
			            {
			                test: /\.tsx?$/,
			                use: [{
			                    loader: 'ts-loader',
			                    options: {
			                        appendTsSuffixTo: [/\.vue$/]  往vue文件后面添加ts后缀
			                    }
			                }],
			                exclude: /node_modules/
			            },
			            {
			                test: /\.css$/,
			                use: [
			                  'vue-style-loader',
			                  'css-loader'
			                ]
			            }
			        ]
			    },
			    plugins: [
			        new HtmlWebpackPlugin({
			            template: './src/tpl/index.html'
			        }),
			        new VueLoaderPlugin()	使用vue-loader需要添加插件
			    ],
			    optimization: {
			        splitChunks: {
			            chunks: 'all'
			        }
			    }
			}

2、类型约束