1.使用官方脚手架搭建这个是官方文档：https://cli.vuejs.org/zh/globalinstallation@vue/clinpminstall-g@vue/clitorunvuecreatevuecreatevue-ts-demodeault没有包含typescript，所以我们选择Manuallyselectfeatures。这里我选择babel,typescript,router,vuex,CSSPre-processors,Linter/Formatter然后按照提示选择我需要安装的。这是我的选择。我没有为路由器选择默认的histoty模式。我习惯使用散列模式。这些都是自由选择。配置成功后，运行项目$cdvue-cli3-ts-demo$npmrunserve项目运行为npmrunserve，不是之前的npmrundev，可以看一下package.json"scripts"中的代码：{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","lint":"vue-cli-servicelint"}，打开地址"http://localhost:8080/”在浏览器中，可以看到项目已经运行2.typescriptts的语法和使用，参考官方文档：https://www.tslang.cn/index.html我也写了一些注释之前：https://github.com/liujianxi/...3.项目结构├──README.md├──babel.config。js├──package-lock.json├──package.json├──public│├──favicon.ico│└──index.html├──src│├──App.vue│├──assets││└──logo.png│├──components│││└──HelloWorld.vue│├──main.ts│├──router││└──index.ts│├──shims-tsx.d.ts│├──shims-vue.d.ts│├──store││└──index.ts│└──views│├──About.vue│└──Home.vue└──tsconfig.json查看项目结构，可以看到shims-tsx.d.ts和shims-vue.d.ts的使用方式如下shims-tsx.d.ts：允许在vue项目中使用.tsx文件。详情请参考Hereshims-vue.d.ts:allowimport并且使用.vue单文件组件，因为typescript默认不支持导入vue文件。4.webpack配置从项目结构可以看到，之前的webpack相关配置都没有了。那么什么是vue-cli-service，文档是这样描述的vue-cli-serviceserve命令会启动一个开发服务器（基于webpack-dev-server），开箱即用的模块热重载（Hot-模块更换）。我们可以看到vue-cli-service已经打包好了，开箱即用。但有时你需要自己配置webpack。文档也给出了一个方法，就是新建一个vue.config.js文件。vue.config.js是一个可选的配置文件。如果项目的根目录（与package.json同级）目录下存在这个文件，会被@vue/cli-service自动加载。新建一个与package.json同级的vue.config.js文件，配置如下//vue.config.jsmodule.exports={publicPath:process.env.NODE_ENV==='production'?'./':'/',outputDir:'dist',assetsDir:'static',filenameHashing:true,//eslint-loader保存时是否检查lintOnSave:true,//是否使用包含的Vue核心构建runtimeCompilertheruntimecompiler:false,//默认情况下，babel-loader忽略所有文件node_modulestranspileDependencies:[],//生产环境sourceMapproductionSourceMap:false,//Cors相关https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors//corsUseCredentials:false,//webpack配置，当使用key-value对象时会合并配置，当是方法时会重写配置//https://cli.vuejs.org/guide/webpack.html#simple-configurationconfigureWebpack:(config)=>{},//用于生成和修改webapck配置的webpack链接API//https://github.com/mozilla-neutrino/webpack-chainchainWebpack:(config)=>{//因为是多页面，取消chunks，每个页面只对应一个JS/CSScon图.optimization.splitChunks({cacheGroups:{}});//'src/lib'目录下的外部库文件，不参与eslintdetectionconfig.module.rule('eslint').exclude.add('/Users/maybexia/Downloads/FE/community_built-in/src/lib').end()},//配置比那个高inchainWebpackcssloader配置css:{//是否启用foo.module.css样式requireModuleExtension:true,//是否使用css分离插件ExtractTextPlugin，使用独立样式文件加载，不要使用什么是vue-property-decorator，文档在这，它提供函数装饰器修饰符的语法可以看官方文档import{Vue,Component,Prop}from'vue-property-decorator'@Componentexport默认类YourComponentextendsVue{@Prop(Number)readonlypropA:number|undefined@Prop({default:'defaultvalue'})只读propB!:string@Prop([String,Boolean])readonlypropC:string|布尔|undefined}等价于exportdefault{props:{propA:{type:Number},propB:{default:'defaultvalue'},propC:{type:[String,Boolean]}}}然后src/components/HelloWorld.vue等同于{{msg}}
