ons module ffi 命令 標識 ora 推斷 com mpi

第一步、安裝vue npm install -g vue-cli 第二步、創建vue項目 vue init webpack XXX項目
cd XXX項目 第三步、安裝依賴 npm install typescript vue-class-component -D
npm install [email protected] -D 第四步、修改webpack配制文件 然後修改 ./build/webpack.base.conf.js 文件中，在 resolve.extension 中添加 ‘.ts’，使引入 ts 文件時不用寫 .ts 後綴 在 module.rules 中添加 webpack 對 ts 文件的解析 {
test: /\.tsx?$/,
loader: ‘ts-loader‘,
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
} 第五步、增加typescript配制文件 在項目根目錄下創建 tsconfig.json 文件：
// tsconfig.json
{
"compilerOptions": {
// 與 Vue 的瀏覽器支持保持一致
"target": "es5",
// 這可以對 `this` 上的數據屬性進行更嚴格的推斷
"strict": true,
// 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015",
"moduleResolution": "node"，
// 允許從沒有設置默認導出的模塊中默認導入
"allowSyntheticDefaultImports": true,
// 啟用裝飾器
"experimentalDecorators": true
}
} 第六步、vue-shim.d.ts 文件 在 ./src 目錄創建 vue-shim.d.ts 文件，讓 ts 識別 .vue 文件：
// vue-shim.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
} 第七步、修改vue文件
將 src 目錄下的所有 js 文件後綴改為 .ts，然後將 webpack 配置文件 ./build/webpack.base.conf.js 中的入口 entry 修改為 main.ts
改造之後的 ts 文件不會識別 .vue 文件，所以在引入 .vue 文件的時候，需要手動添加 .vue 後綴 ，在所有 .vue 文件中，都需要在 <script> 中添加 lang="ts" 標識 在命令行使用npm run dev 不報錯就成功 第八步、利用 vue-class-component 繼續改造
然後改造 .vue 文件的 <script> 部分，以 HelloWorld.vue 為例：
<script lang="ts">
import Vue from ‘vue‘
import Component from ‘vue-class-component‘
// @Component 修飾符註明了此類為一個 Vue 組件
@Component({})
export default class Hello extends Vue {
msg: String = ‘Welcome to Your Vue.js App‘
}
</script>

vue+typescript組建前端架構