vue cli4.0項(xiàng)目引入typescript的方法
現(xiàn)有的項(xiàng)目是采用vue cli4.0腳手架生成的,現(xiàn)在想要引入typescript。
1.執(zhí)行安裝命令
npm install --save-dev typescriptnpm install --save-dev @vue/cli-plugin-typescript
2.根目錄下新建 tsconfig.json
{ 'compilerOptions': { 'target': 'esnext', 'module': 'esnext', 'strict': true, 'importHelpers': true, 'moduleResolution': 'node', 'experimentalDecorators': true, 'esModuleInterop': true, 'allowSyntheticDefaultImports': true, 'sourceMap': true, 'baseUrl': '.', 'allowJs': false, 'noEmit': true, 'types': ['webpack-env'], 'paths': { '@/*': ['src/*'] }, 'lib': ['esnext', 'dom', 'dom.iterable', 'scripthost'] }, 'exclude': ['node_modules']}
3.新增 shims-vue.d.ts根目錄下新建 shims-vue.d.ts,讓 ts 識(shí)別 *.vue 文件,文件內(nèi)容如下:
declare module ’*.vue’ { import Vue from ’vue’; export default Vue;}
4.修改入口文件后綴
src/main.js => src/main.ts
5.改造 .vue 文件
src/main.js => src/main.ts
加上 lang=ts 可以讓webpack識(shí)別此段代碼為 typescript
6.使用裝飾器插件
vue-class-component:強(qiáng)化 Vue 組件,使用 TypeScript裝飾器 增強(qiáng) Vue 組件,使得組件更加扁平化vue-property-decorator:在 vue-class-component 上增強(qiáng)更多的結(jié)合 Vue 特性的裝飾
Demo:
import { Vue, Component ,Watch} from ’vue-property-decorator’;@Component({ components: { Loading }})export default class App extends Vue{ old_back:object=null, transitionName:string = 'slide-right'; get ...mapState('base', ['loadingStatus']); @Watch(’$route’) onChangeValue(to:object, from:object){ // console.log(’$route’, to, from) const noBack = to.meta.noBack; // 監(jiān)聽(tīng)路由變化時(shí)的狀態(tài)為前進(jìn)還是后退 // 去終節(jié)點(diǎn)左,從終節(jié)點(diǎn)過(guò)來(lái)右 if (to.meta.last) { this.transitionName = 'slide-left'; } else if (from.meta.last) { this.transitionName = 'slide-right'; } else if (from.meta.leaf) { // 從其它葉子頁(yè)面過(guò)來(lái)的,往右 this.transitionName = 'slide-right'; } else { if (noBack) { // 去到不需要返回的界面往右 this.transitionName = 'slide-right'; } else { this.transitionName = 'slide-left'; } } } @Watch(’loadingStatus’) onChangeValue(newVal: string){ if (newVal) { setTimeout(_ => { this.setLoading(false); }, 1500); } } // 彈出系統(tǒng)提示對(duì)話框 showAlert(msg:string) { plus.nativeUI.alert( msg, function() { // console.log('User pressed!'); }, '報(bào)警詳情', '確定' ); }}
到此這篇關(guān)于vue cli4.0項(xiàng)目引入typescript的文章就介紹到這了,更多相關(guān)vue cli4.0引入typescript內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 使用Python webdriver圖書(shū)館搶座自動(dòng)預(yù)約的正確方法2. PHP如何開(kāi)啟Opcache功能提升程序處理效率3. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條4. 在線php代碼縮進(jìn)、代碼美化工具:PHP Formatter5. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論6. PHP程序員簡(jiǎn)單的開(kāi)展服務(wù)治理架構(gòu)操作詳解(二)7. 從Python的字符串中剝離所有非數(shù)字字符(“。”除外)8. Python3 json模塊之編碼解碼方法講解9. android H5本地緩存加載優(yōu)化的實(shí)戰(zhàn)10. Android 簡(jiǎn)單的實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能

網(wǎng)公網(wǎng)安備