我一直在做的小程序就是 山科小站 也已经做了两年了，目前是用uniapp构建的，在这期间也重构好几次了，这次在鹅厂实习感觉受益良多，这又得来一次很大的重构，虽然小程序功能都是比较简单的功能，但是这好不容易实习学到的东西得学以致用，那就继续在小程序上动手吧哈哈。这次实习收获最大倒不是怎么迁移到TS，而是一些组件设计的概念以及目录结构设计上的东西，不过这都是在之后重写组件的时候要做的东西了。回到正题，小程序是用uniapp写的，毕竟还是比较熟悉Vue语法的，这次迁移首先是要将小程序从HBuilderX迁移到cli版本，虽然用HBuilderX确实是有一定的优点，但是拓展性比较差，这些东西还是得自己折腾折腾，迁移到cli版本完成后，接下来就是要慢慢从js过渡到ts了，虽然是Vue2对ts支持相对比较差，但是至少对于抽离出来的逻辑是可以写成ts的，可以在编译期就避免很多错误，另外自己使用cli创建可以搞一些其他功能，毕竟只要不操作DOM的话一般还是在用常用的js方法，例如可以尝试接入Jest单元测试等。
迁移到cli版本首先要迁移到cli版本，虽然 官网 上说明了如何新建一个cli版本的uniapp，但是其中还是有很多坑的。
首先在安装依赖的时候npm和yarn是没有问题的，但是用pnpm安装依赖的会出现无法编译的情况，多般测试也没有结果，像是内部有一个异常，然后被uniapp编写的webpack插件给捕捉了，并且没有向外抛出异常信息，这就很难受，本来一直是用pnpm去管理包，现在只能是使用yarn去管理整个项目了，另外我想使用软连接mklink -J做一个中心包存储也失败了，插件生成的dist文件夹的位置很奇怪，导致打包的时候寻找文件夹路径失败，也最终导致编译失败，所以想用uniapp的cli的话，还是只能按部就班地来，不能搞些骚操作。
首先安装全局安装vue-cli:
创建项目project:
$ npm install -g @vue/cli之后就要选择版本了，要选择TypeScript的默认模板，这样就不需要自己去配置例如tsconfig.json这种的了。在之后就需要将之前的代码移动到新的目录的src目录下，当然诸如.editorconfig这些配置文件还是要迁移出来放置在根目录下的，如果没有配置一些插件例如sass的话，现在小程序可能能够运行了，如果还安装了其他插件，那就特别是要注意依赖问题，因为uniapp写的这些插件有的是挺老的依赖，所以需要安装老版本插件去兼容。
安装插件上边说到了直接yarn install -D xxx可能会出现问题，比如我就遇到了sass和webpack版本不兼容问题，另外eslint和prettier这些规范代码的插件也是需要安装的，另外还有eslint的ts parser和插件等等，在这里我已经直接配好了，在VS Code中能够正常运行起来，另外还配置了lint-staged等，这里直接给予package.json的信息，有这个文件当然就能够直接启动一个正常的能够编译的uniapp-typescript模板了，如果还需要其他插件的话就需要自己尝试了。
{ "name": "shst", "version": "3.6.0", "private": true, "scripts": { "serve": "npm run dev:h5", "build": "npm run build:h5", "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build", "build:custom": "cross-env NODE_ENV=production uniapp-cli custom", "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build", "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build", "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build", "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build", "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build", "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build", "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build", "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build", "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build", "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build", "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build", "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build", "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch", "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom", "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve", "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch", "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch", "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch", "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch", "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch", "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch", "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch", "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch", "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch", "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch", "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch", "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js", "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js", "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i", "test:h5": "cross-env UNI_PLATFORM=h5 jest -i", "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i", "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i", "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i" }, "dependencies": { "@dcloudio/uni-app-plus": "^2.0.0-32220210818002", "@dcloudio/uni-h5": "^2.0.0-32220210818002", "@dcloudio/uni-helper-json": "*", "@dcloudio/uni-i18n": "^2.0.0-32220210818002", "@dcloudio/uni-mp-360": "^2.0.0-32220210818002", "@dcloudio/uni-mp-alipay": "^2.0.0-32220210818002", "@dcloudio/uni-mp-baidu": "^2.0.0-32220210818002", "@dcloudio/uni-mp-kuaishou": "^2.0.0-32220210818002", "@dcloudio/uni-mp-qq": "^2.0.0-32220210818002", "@dcloudio/uni-mp-toutiao": "^2.0.0-32220210818002", "@dcloudio/uni-mp-vue": "^2.0.0-32220210818002", "@dcloudio/uni-mp-weixin": "^2.0.0-32220210818002", "@dcloudio/uni-quickapp-native": "^2.0.0-32220210818002", "@dcloudio/uni-quickapp-webview": "^2.0.0-32220210818002", "@dcloudio/uni-stat": "^2.0.0-32220210818002", "@vue/shared": "^3.0.0", "core-js": "^3.6.5", "flyio": "^0.6.2", "regenerator-runtime": "^0.12.1", "vue": "^2.6.11", "vue-class-component": "^6.3.2", "vue-property-decorator": "^8.0.0", "vuex": "^3.2.0" }, "devDependencies": { "@babel/plugin-syntax-typescript": "^7.2.0", "@babel/runtime": "~7.12.0", "@dcloudio/types": "*", "@dcloudio/uni-automator": "^2.0.0-32220210818002", "@dcloudio/uni-cli-shared": "^2.0.0-32220210818002", "@dcloudio/uni-migration": "^2.0.0-32220210818002", "@dcloudio/uni-template-compiler": "^2.0.0-32220210818002", "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-32220210818002", "@dcloudio/vue-cli-plugin-uni": "^2.0.0-32220210818002", "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-32220210818002", "@dcloudio/webpack-uni-mp-loader": "^2.0.0-32220210818002", "@dcloudio/webpack-uni-pages-loader": "^2.0.0-32220210818002", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-typescript": "*", "@vue/cli-service": "~4.5.0", "babel-plugin-import": "^1.11.0", "cross-env": "^7.0.2", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^7.17.0", "jest": "^25.4.0", "lint-staged": "^11.1.2", "mini-types": "*", "miniprogram-api-typings": "*", "postcss-comment": "^2.0.0", "prettier": "^2.3.2", "sass": "^1.38.2", "sass-loader": "10", "typescript": "^4.4.2", "vue-eslint-parser": "^7.10.0", "vue-template-compiler": "^2.6.11" }, "browserslist": [ "Android >= 4", "ios >= 8" ], "uni-app": { "scripts": {} }, "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,vue,ts}": [ "eslint --fix", "git add" ] } } 迁移到TS