vue3.0+vite+typescipt

vite是什么

vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

vite 的优点

1.快速的冷启动：不需要等待打包操作；
2.即时的热模块更新：替换性能和模块数量的解耦让更新飞起；
3.真正的按需编译：不再等待整个应用编译完成，这是一个巨大的改变。

创建vite项目

npm init vite-app 
cd 
npm install
npm run dev

生成之后的目录结构及package.json如下

image.png

安装typescript

npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript

根目录下新建tsconfig.json

{
    "compilerOptions": {
        "module": "system", // 指定生成哪个模块系统代码： "None"， "CommonJS"， "AMD"，"System"， "UMD"， "ES6"或 "ES2015"。► 只有 "AMD"和 "System"能和 --outFile一起使用。
► "ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。
        "noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错。
        "preserveConstEnums": true, // 保留 `const`和 `enum`声明。查看 [const enums documentation](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#94-constant-enum-declarations)了解详情。
        "sourceMap": true, // 生成相应的 .map文件。
        "noEmit": true, //不生成输出文件。
        "importHelpers": true, // 从 [`tslib` ](https://www.npmjs.com/package/tslib)导入辅助工具函数（比如 `__extends`， `__rest`等）

    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

新建shims-vue.d.ts

src 目录下新建shims-vue.d.ts;让 ts 识别 *.vue 文件，文件内容如下

declare module '*.vue' {
   import Vue from 'vue'
   export default Vue
 }

修改main.js文件后缀

src/main.js => src/main.ts

注意小细节把index.html的main引入也要修改，如下图

image.png

新建vite.config.ts

在项目的根目录新建vite.config.ts;更多配置参考:https://github.com/vitejs/vite/blob/master/src/node/config.ts

module.exports = {
  base: './', //在生产中服务时的基本公共路径。
  // 引用全局 scss
  cssPreprocessOptions: {
    scss: {
      additionalData: '@import "./src/assets/scss/index.scss";'
    }
  },
  // 压缩
  minify: 'esbuild',
  // 是否自动在浏览器打开
  open: true,
}

最后的目录结构图及运行图附上

image.png

image.png

如果还想深入了解vite，推荐：https://cn.vitejs.dev/guide/

如果觉得有帮助麻烦点个赞，如有不对麻烦评论留言，我好及时更正，谢谢！让我们活在997下，敲得潇潇洒洒