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

淩亂°似流年 2021-07-24 20:48 681阅读 0赞

1、搭建环境
    	方式一:
    		vue ui手动配置->添加项目->手动配置
    		->添加Babel、Typescript、使用配置文件,其他选择自定义
    		->选择css预处理器和Eslint
    	
    	方式二:
    		vue create 项目名创建
    		选择手动配置,可添加typescript
    			空格添加,回车下一步
    	
    	方式三:手动创建
    		(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、类型约束
    	(1)props参数约束:
    	
    		import Vue, { PropType } from 'vue'
    
    		interface ComplexMessage { 
    		  title: string,
    		  okMessage: string,
    		  cancelMessage: string
    		}
    		const Component = Vue.extend({
    		  props: {
    		    name: String,	可以直接写约束条件
    		    success: { type: String },
    		    callback: { 
    		      type: Function as PropType<() => void>	可以通过PropType定义复杂类型约束条件
    		    },
    		    message: {
    		      type: Object as PropType<ComplexMessage>,
    		      required: true,
    		      validator (message: ComplexMessage) {	自定义验证规则
    		        return !!message.title;
    		      }
    		    }
    		  }
    		})