vue cli4.0項目引入typescript的方法
更新時間：2020年07月17日 16:36:03 作者：在一瞬間有一千萬種可能......
這篇文章主要介紹了vue cli4.0項目引入typescript的方法，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
現(xiàn)有的項目是采用vue cli4.0腳手架生成的，現(xiàn)在想要引入typescript。
1.執(zhí)行安裝命令
npm install --save-dev typescript npm 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 識別 *.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識別此段代碼為 typescript
6.使用裝飾器插件
vue-class-component：強化 Vue 組件，使用 TypeScript裝飾器 增強 Vue 組件，使得組件更加扁平化
vue-property-decorator：在 vue-class-component 上增強更多的結合 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ài)為前進還是后退
// 去終節(jié)點左，從終節(jié)點過來右
if (to.meta.last) {
this.transitionName = "slide-left";
} else if (from.meta.last) {
this.transitionName = "slide-right";
} else if (from.meta.leaf) {
// 從其它葉子頁面過來的，往右
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)提示對話框
showAlert(msg:string) {
plus.nativeUI.alert(
msg,
function() {
// console.log("User pressed!");
},
"報警詳情",
"確定"
);
}
}
到此這篇關于vue cli4.0項目引入typescript的文章就介紹到這了,更多相關vue cli4.0引入typescript內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
要在Vue?3和Electron中實現(xiàn)本地化,可以使用類似于在Vue項目中進行本地化的方式,本文為大家介紹了一種常見的做法,希望對大家有所幫助2024-03-03
這篇文章主要介紹了Vue實現(xiàn)漸變色進度條的代碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解Vue 2中的? initState 狀態(tài)初始化
這篇文章主要介紹了詳解Vue 2中的initState狀態(tài)初始化，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖形驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
Vue3+antDesignVue實現(xiàn)表單校驗的方法
這篇文章主要為大家詳細介紹了基于Vue3和antDesignVue實現(xiàn)表單校驗的方法,文中的示例代碼講解詳細,具有一定的參考價值,需要的小伙伴可以了解下2024-01-01
詳解elementui之el-image-viewer(圖片查看器)
這篇文章主要介紹了詳解elementui之el-image-viewer(圖片查看器)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟
這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下2023-11-11
vue在響應頭response中獲取自定義headers操作
這篇文章主要介紹了vue在響應頭response中獲取自定義headers操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue中的Strorage本地化存儲詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04