前言
vue3 已經正式發布，網上有不少vue3+typescript的文章了，腳手架也更新了好多版本，以下主要是基礎的vue+typscript的安裝和新特性
一.更新@vue/cli（很多人都還在用vue2.x，所以需要先跟新一下vue的版本）
建議使用最新的vue3.x，因為vue3也更新了不少版本,
如果已經安裝了vue2.x的，可以通過卸載舊版本，再安裝新版本，否則直接跳過步驟1，2進入第3步
1. 卸載舊版本（npm uninstall vue-cli -g）
2. 執行 npm cache clean --force 清除緩存
3. 安裝Vue CLI 3（npm install -g @vue/cli）
4. vue -V 查看是否安裝成功
ps: 這邊使用的版本是@vue/cli@4.5.6
二.創建項目
建議使用最新的vue3.x，因為vue3也更新了不少版本,
使用@vue/cli 命令行創建項目
vue create vue-demo // vue-demo 是我們的項目名稱，可根據自己要求自定義
第一步 選擇Manually select feature手動
第二步 選擇空格選中需要的配置 bable,TypeScript必選 （其他根據項目要求來搭配）
配置選項：
TypeScript： 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router： 支持 vue-router 。
Vuex： 支持 vuex 。
CSS Pre-processors： 支持 CSS 預處理器。
Linter / Formatter： 支持代碼風格檢查和格式化。
Unit Testing： 支持單元測試。
E2E Testing： 支持 E2E 測試。
第三步 選中vue3.x版本（因為學習vue3.x，所以肯定選中的是vue3.x）
然后根據自己的需要來確認y/n
ps：這個意思就是把你這次選擇設置到模板預設里面去，設置了下次可以直接選擇使用
剩下就是等待安裝了。
安裝完成進入項目：
cd vue-demo,然后啟動服務
npm serve,等到服務啟動后在瀏覽器地址欄輸入 http://localhost:8080/
三.Vue3新特性
Vue3 的一些新特性
- 首先是向下兼容，Vue3 支持大多數 Vue2 的特性。我們同事甚至開玩笑說，我就拿 Vue2 的語法開發 Vue3，也是沒有任何問題的。
- 性能的提升，每個人都希望使用的框架更快，更輕。Vue3 做到了，給開發者一個極致的體驗。官方網站給出的數據是：打包大小減少 41%，初次渲染快 55%，更新快 133%，內存使用減少 54%（驚艷到的請把驚艷兩個字打到公屏上）。
- 新推出的Composition API ，在 Vue2 中遇到的問題就是復雜組件的代碼變的非常麻煩，甚至不可維護。說白了就是封裝不好，重用不暢。這個Composition API一推出，立馬解決了這個問題，本套課程中也會重點介紹這部分內容。它是一系列 API 的合集。
- 其他新特性：Teleport(瞬移組件)、Suspense(解決異步加載組件問題)和全局 API 的修改和優化。
- 更好TypeScript支持，我以前在開發 Vue2 的時候，是不適用TypeScript的，因為集成時很困難，疼點太多。但 Vue3 解決了這個問題，Vue3 的源代碼就是使用TypeScript進行開發的。所以在新的版本上使用TS也更加順暢無阻。
ps: 這個不是我寫的，看別人論壇拿過來用，原博客地址：https://www.jspang.com/
1.先從main.ts開始
import { createApp } from "vue"; // 引入vue文件，並導出`createApp`
import App from "./App.vue"; // 引入自定義組件，在頁面上看的東西基本都在這個組件里
import router from "./router";
// 定義路由訪問
import store from "./store";
//引入store下的index.ts，里面是vuex數據以及操作，不詳講
createApp(App)
.use(store)
// 使用vuex
.use(router)
// 使用路由
.mount("#app");
// 把App掛載到#app節點上，在public目錄下的index.html找節點
2.我們再找到app.vue文件,這個應該跟vue2一樣，如果不清楚可以去看看官方文檔（https://cn.vuejs.org/）
<template>
<div id="nav">
<!-- 路由跳轉 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!-- 路由匹配到的組件將顯示在這里 -->
<router-view />
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
ps: 心態崩了啊，本地排好版，復制進來全部重置，后面接着更新吧，不過排版看着很難受