Vue3.x+TypeScript安装初体验

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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/[email protected]

二.创建项目

建议使用最新的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: 心态崩了啊，本地排好版，复制进来全部重置，后面接着更新吧，不过排版看着很难受