Vue3/Vite/Typescript 尝鲜

Vue3早已正式发布，增加了不少新的功能，尤其是对于typescript的支持，让准备由Angular转Vue的我尤为感兴趣。简单试了试，遇到些坑，罗列一下：

文章目录

• Vite
• 项目实战
• 总结

Vite

先说Vite， Vite是一个新的东西，也是尤大人的作品，已经发布了多个RC版本（Till 2020.12），1.0 即将发布,是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动， 不再依赖webpack （据说目标是不只支持Vue）：

1. 快速的冷启动，不需要等待打包操作；
2. 即时的热模块更新，替换性能和模块数量的解耦，是的更新速度更快；
3. 使用了ES Module,代码以模块的形式引入到文件，同时实现了按需加载。
   总之一个字，“快”。当然，针对的是开发环境 ：）

项目实战

创建vue项目

创建一个叫vue3vite的vue项目

$ npm init vite-app vue3vite
$ cd vue3vite
$ npm install
$ npm run dev

可以看到，package.json 如下，

{
  "name": "vue3vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.2"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.8",
    "@vue/compiler-sfc": "^3.0.2"
  }
}

1. 默认依赖只包含vue、vite
2. scripts下面，npm run dev启动； npm run build 编译（但是依赖Rollup）

增加typescript的支持

1. 安装typescript

npm install typescript

2. 根目录下新建tsconfig.json，内容如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

3. src下，新增文件shims-vue.d.ts, 使IDE识别*.vue中的代码：

declare module "*.vue" {
  import { defineComponent } from "vue";
  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

4. 测试是否支持ts文件。将main.js改名为main.ts, 修改index.html中的引用

<script type="module" src="/src/main.js"></script> 

改为：

<script type="module" src="/src/main.ts"></script> 

5. 运行测试。搞定！

总结

Vite的概念很前沿，很强大，对于开发、调试的效率将会有不少提高，希望正式版早些发布。现阶段，正式项目还是绕过vite吧。