怎麼複製加密狗

目前市場上大部分腳手架在生成項目時都會提示是否要安裝 typescript. 比如 vue-cli3+。但還是有很多老項目或者是通過 vue-cli2 構建的項目一直在被維護中。如果你想對這些老項目重新改造、以舊換新，爲其添加 typescript 支持的話，Give me five minutes Plz。
只需要以下 6 小步。

1. 安裝相關依賴
   $ npm install typescript ts-loader vue-property-decorator -D
   複製代碼typescript 必須安裝，你要問能不能不安裝它，哼哼~你究竟幹啥來的！
   ts-loader 告訴 webpack 我是 ts.
   vue-property-decorator 讓 vue 支持修飾器，這裏也可以使用 vue-class-component. 至於用法這裏不講，想了解可以點擊開發教程進行閱讀.

2. 修改 webpack 配置
   在 build 目錄下找到 webpack.base.config.js 文件. 新增一個 rule 配置.
   module: {
   rules: [
   …
   {
   test: /.tsx?KaTeX parse error: Can't use function '\.' in math mode at position 85: …dTsSuffixTo: [/\̲.̲vue/]
   }
   }],
   exclude: /node_modules/
   },

   …
   複製代碼3. 創建 vue 聲明文件
   在 src 目錄下創建一個 shims-vue.d.ts 文件，這裏叫啥無所謂，但是必須要以 .d.ts 爲後綴.
   declare module ‘*.vue’ {
   import Vue from ‘vue’
   export default Vue
   }
   複製代碼其作用是讓TS編譯器識別 vue 文件.

3. 創建 tsconfig.json
   在項目根目錄下創建 tsconfig.json 文件. 這個文件可以使用 tsc 命令創建.
   $ tsc --init
   複製代碼如果提示沒有 tsc，你需要在全局安裝 typescript
   $ npm install typescript -g
   複製代碼文件配置如下：
   {
   “compilerOptions”: {
   “strict”: true,
   “module”: “es2015”,
   “moduleResolution”: “node”,
   “target”: “es5”,
   “allowSyntheticDefaultImports”: true,
   “declaration”: false,
   “noImplicitAny”: true,
   “strictNullChecks”: true,
   “emitDecoratorMetadata”: true,
   “experimentalDecorators”: true,
   “allowJs”: true,
   “lib”: [
   “es2017”,
   “es2016”,
   “dom”
   ]
   },
   “include”: [“src/**/.”],
   “exclude”: [“node_modules”, “build”, “dist”]
   }
   複製代碼這裏不對配置一一進行介紹，想要了解可以點擊編譯選項進行閱讀.

4. 用 ts 替換 js 文件
   有 4 處文件需要修改

src/App.vue

複製代碼
src/components/HelloWorld.vue

複製代碼
src/router/index.ts

import Vue from ‘vue’
import Router, { RouteConfig } from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld.vue’
Vue.use(Router)
const routes: RouteConfig[] = [
{
path: ‘/’,
component:HelloWorld
}
]
export default new Router({
routes
})
複製代碼
src/main.ts

import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router/index’

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})
複製代碼6. 修改 entry
回到 webpack.base.config.js 配置文件，講入口的 main.js 修改爲 main.ts 即可.
module.exports = {
entry: {
app: ‘./src/main.ts’
}
…
}