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回車就自動輸入好了.減小重複勞動

 1 "Print to console": {  2         "scope": "vue",  3         "prefix": "vuets",  4         "body": [  5             "<!-- $1 -->",  6             "<template>",  7             "    <div class=\"\"></div>",  8             "</template>",  9             "", 10             "<script lang=ts>", 11             "import { Component, Vue, Prop, Watch } from 'vue-property-decorator';", 12             "@Component", 13             "export default class $2 extends Vue {", 14             "}", 15             "</script>", 16             "<style lang=stylus scoped>", 17             "</style>"
18  ], 19         "description": "Log output to console"
20     }

六.組件調用傳值

如下是一個超鏈接列表組件,接收一個數組,循環router-link,最終獲得a標籤列表

 1 <template>
 2     <div class="list">
 3         <router-link :to="item.path" v-for="(item,index) in data" :key="index">{{item.title}}</router-link>
 4     </div>
 5 </template>
 6 
 7 <script lang=ts>
 8 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';  9 @Component 10 export default class extends Vue { 11  @Prop() 12     private data?: []; 13  private created() { 14         window.console.log(this.data); 15  } 16 } 17 </script>
18 <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用法,還待研究.