您好,登錄后才能下訂單哦!
前言
Vue的官方文檔沒有給出與TypeScript集成的具體步驟,網(wǎng)上其他的教程不是存在問題就是與vue-cli建立的項目存在差異,讓人無從下手。
下面我就給出vue-cli建立的項目與TypeScript集成的最簡配置。
初始化項目
首先用vue-cli建立webpack項目。這里為了演示方便,沒有打開router和eslint等,可以根據(jù)自身情況打開。
# vue init webpack vue-typescript ? Project name vue-typescript ? Project description A Vue.js project ? Author ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No
安裝TypeScript相關(guān)依賴和項目其余依賴,用npm或cnpm
# cd /vue-typescript # npm install typescript ts-loader --save-dev # npm install
配置
修改目錄下bulid/webpack.base.conf.js文件,在文件內(nèi)module>rules添加以下規(guī)則
{ test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } },
在src目錄下新建一個文件vue-shims.d.ts,用于識別單文件vue內(nèi)的ts代碼
declare module "*.vue" { import Vue from "vue"; export default Vue; }
在項目根目錄下建立TypeScript配置文件tsconfig.json
{ "compilerOptions": { "strict": true, "module": "es2015", "moduleResolution": "node", "target": "es5", "allowSyntheticDefaultImports": true, "lib": [ "es2017", "dom" ] } }
重命名src下的main.js
為main.ts
修改webpack.base.conf.js
下的entry>app為'./src/main.ts'
修改src下的App.vue文件,在
<script lang="ts">
測試
下面可以測試是否集成成功,編輯src/components/Hello.vue文件,修改
<script lang="ts"> import Vue, {ComponentOptions} from 'vue' export default { name: 'hello', data() { return { msg: 'this is a typescript project now' } } } as ComponentOptions<Vue> </script>
運行項目
# npm run dev
測試成功,現(xiàn)在是一個TypeScipt項目了
進階
配置官方推薦的vue-class-component,https://cn.vuejs.org/v2/guide/typescript.html
安裝開發(fā)依賴
# npm install --save-dev vue-class-component
修改ts配置文件,增加以下兩項配置
"allowSyntheticDefaultImports": true, "experimentalDecorators": true,
改寫我們的Hello組件
<script lang="ts"> import Vue from 'vue' import Component from 'vue-class-component' @Component export default class Hello extends Vue { msg: string = 'this is a typescript project now' } </script>
使用vue-class-component后,初始數(shù)據(jù)可以直接聲明為實例的屬性,而不需放入data() {return{}}中,組件方法也可以直接聲明為實例的方法,如官方實例,更多使用方法可以參考其官方文檔
https://github.com/vuejs/vue-class-component#vue-class-component
import Vue from 'vue' import Component from 'vue-class-component' // @Component 修飾符注明了此類為一個 Vue 組件 @Component({ // 所有的組件選項都可以放在這里 template: '<button @click="onClick">Click!</button>' }) export default class MyComponent extends Vue { // 初始數(shù)據(jù)可以直接聲明為實例的屬性 message: string = 'Hello!' // 組件方法也可以直接聲明為實例的方法 onClick (): void { window.alert(this.message) } }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。