先安裝node環境
安裝最新的vue cli
https://cli.vuejs.org/guide/installation.html
npm install -g @vue/cli
卸載之前電腦安裝的2.0的vue cli：npm uninstall vue-cli -g
vue -V或者是vue --version 查看是否安裝成功了
選擇第二個，如果選了第一個的話，就指揮安裝babel和eslint
鼠標指過來，只需要回車就可以選中這個復選框了。選完后點擊回車。
是否使用router？yes
不保存
看到這樣畫面就表示成功了。
啟動項目
文件結構目錄
index.html是入口文件。
babel.config.js是babel的設置文件。
package.json:模塊依賴。
設置TypeScript所用到的東西。
src目錄
assets放靜態文件，圖片等
components放封裝的組件。
views就是試圖。
就是頁面上所看到的組件。都會放在views文件夾下 。
App.vue就是根組件。
個之前看到的main.js是一樣的，入口函數的文件。
router.ts就是設置路由
store.ts就是Vuex存儲的。
shims-tsxd.ts告訴當前項目，可以識別以jsx結尾的文件。然后在vue項目里面可以使用jsx寫代碼。
當前的ts可以識別vue文件。告訴ts導入.vue的文件。然后通過vue constructor處理文件。
當前寫的代碼 ，和我們之前的寫的vue的代碼有很大的不同，因為我們使用的是ts。
比如說裝飾器，這里看到的帶@符號的就是我們的裝飾器了。
創建的類Home要繼承Vue這個類。這是我們基本的結構
vue-property-decorator就是裝飾器。
里面有7個裝飾器和一個函數。
在ts里面有個很重要的概念就是裝飾器。定義一些屬性等。
代碼調整
首先把Home和About.vue這兩個文件刪除。
comonents里面的文件也刪除。
App.vue里面router-link這兩個標簽也刪掉。
只留下一個router-view
css4也基本都刪掉了。
設置高度和寬度都是100%
創建一個新的組件
快捷鍵
自動生成基本的代碼。
這里我們不再使用這種形式了。
div.home生成一個class為home的div
從vue-proptery-decorator里面引入component和vue
然后就是使用這個裝飾器@Component。
裝飾器就是對現有的類或者函數進行擴展和補充。
這樣下面的代碼，才是一個完整的組件了。
router.ts
這里刪掉。
這里是Home
引入css
pubic下新建css的文件件，然后粘貼一個reset.css文件進來。 可以在下面注釋的網址上下載下來這個css文件。
這是對我們當前的樣式進行初始化。
引入reset.css
修改頁面的title
然后添加html和body的樣式
頁面展示
console沒有任何的報錯
結束