Vue3/Vite/Typescript 尝鲜

喜欢ヅ旅行 2022-12-26 04:50 158阅读 0赞

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

### 文章目录 ###

*  Vite
 *  项目实战
 *   *  创建vue项目
     *  增加typescript的支持
 *  总结

# 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

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

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

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

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

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

改为：

1.  运行测试。搞定！

# 总结 #

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