vue+typescript基礎練習

環境

win10 

node -v 8.9.3

vue-cli 3.4

typescript 3.1.5

編輯器 vscode

目標

使用vuecli工具,建立一個項目,使用typescript.並實現基本的路由,組件等功能

步驟

一.建項目

官網文檔https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

安裝必要的環境,然后使用管理員身份打開CMD輸入vue ui:

這個是vuecli的圖形化界面,使用它建立比較方便,命令行的命令是vue create

點create開始建立項目,選中帶typescript stylus的那種,然后一路下一步,直到項目建完.

這里會從node的npm下載很多包,如果網絡不好,會比較慢,還可能失敗.

二.熟悉目錄結構

使用vscode打開這個項目文件夾

看一下,src目錄是源碼,根目錄下有各種配置文件,那個vue.config.js是后來加上去的,本來沒有.

這里並沒有發現webpack.config的配置文件,官網上是這樣講的 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F

大概是說,vuecli自己生成了webpack配置文件,可能通過增加一個vue.config.js的配置文件來調整webpack的配置,

可以使用如下命令查看生成的配置文件 ,在項目根目錄路徑下輸入這個命令,將配置導出到output.js后查看

三.啟動項目

查看package.json的 scripts屬性可知,如下命令啟動項目

npm run serve

這里看到了經典的vue項目頁

運行前,沒有改動任何配置

四.項目主要文件與目錄

App.vue // 

main.ts // 入口文件

router.ts // 路由

store.ts //

/src/views // 可以是頁面文件

/src/plugins // 插件目錄,例如添加element-ui這個插件后,會增加element.js文件

/src/components // 組件目錄,自定義組件可放此處

五.typescript

由於使用了typescript,所以跟js的不太一樣,不過在形式上大體一致,

vue js版本中的屬性,成員,生命周期,在ts的類中有一一對應的,基本是一致的.

使用ts要比js麻煩一些,至少要多寫很多類型定義這些強類型語言的東西,但是也有些好處的,至少有語法提示,重構時還能批量修改等等,另外,語法檢查使用了tslint,比較嚴格.

雖然麻煩,但覺得還是值得的.vscode有建立代碼片段的功能,可以建一個vuets的模板,這樣比較省事,點擊文件菜單

文件 -> 

使用這個模板,這是個vue文件模板,新建一個vue文件后,輸入vuets回車就自動輸入好了.減少重復勞動

"Print to console": {
        "scope": "vue",
        "prefix": "vuets",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "    <div class=\"\"></div>",
            "</template>",
            "",
            "<script lang=ts>",
            "import { Component, Vue, Prop, Watch } from 'vue-property-decorator';",
            "@Component",
            "export default class $2 extends Vue {",
            "}",
            "</script>",
            "<style lang=stylus scoped>",
            "</style>"
        ],
        "description": "Log output to console"
    }

六.組件調用傳值

以下是一個超連接列表組件,接收一個數組,循環router-link,最終得到a標簽列表

<template>
    <div class="list">
        <router-link :to="item.path" v-for="(item,index) in data" :key="index">{{item.title}}</router-link>
    </div>
</template>

<script lang=ts>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
@Component
export default class extends Vue {
    @Prop()
    private data?: [];
    private created() {
        window.console.log(this.data);
    }
}
</script>
<style lang=stylus scoped></style>

與js版本寫法上的不同處

 這里有個lang=ts,表示使用typescript

 

這個組件用來擴展功能,提供裝飾器?  https://www.tslang.cn/docs/handbook/decorators.html  https://github.com/kaorun343/vue-property-decorator#Prop

有了這個工具后,就可以使用ts的方式來寫了. 

 

下面這段代碼定義一個ts類,並且繼承自Vue,在形式上,和js版本的基本一致

 

 

 從第1個裝飾器 @Component開始,這個的作用就是添加組件,接收一個對象,里面是組件對象,和js的一樣

　　import com1

　　import com2

　　components:{com1,com2}

 

@prop()這個就是js中的屬性,下面的成員是屬性名,?號表示為可空類型

created()這個方法,就是vue生成周期方法了.與js寫法一樣.

 

--調用這個組件:

1.模板部分與js一樣,寫入模板,並且綁定數據

<list :data="this.data"></list>

 

2.ts部分

import list from list.vue // 與js一樣,引入這個組件

// 在組件裝飾器中,注冊這個組件

@Component({

　　components: { list },　　

})

 

遇到的一個坑,調用組件傳入值時,發現總是報錯:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "data"

后來經過網上找資料,說這個意思是,子組件的數據由調用時傳入,自己允許修改這個數據,所以一直這個錯,

解決方法是,將子組件的屬性不設置初始值,也就是只定義屬性名,而不設置值,並且也不能修改這個屬性.

結果如下

由於ts定義屬性一定要賦初值,所以只好定義為可空類型.

七:總結

建項目,熟悉目錄與文件,做個組件調用的DEMO,居然也有如此多的坑.

不過好處還是很大的,新版本的cli不用再去折騰並不熟悉的webpack.這降低了上手難度.

ts與vue的結合已經成熟了,后來應該會越來越順手.

后續還需要一個按目錄結構生成路由配置文件的腳本

element-ui和vant兩種ui分別用於PC和移動端的界面,還是不錯的.但其ts用法,還待研究.