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)配置webpackconst 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;}}}})
如果觉得《vue_ts ts环境搭建及ts格式写法》对你有帮助，请点赞、收藏，并留下你的观点哦！
