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 >
<!-- 路由跳转 -->
<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: 心态崩了啊，本地排好版，复制进来全部重置，后面接着更新吧，不过排版看着很难受
查看更多关于Vue3.x+TypeScript 安装初体验的详细内容...