Vite2+TypeScript4+Vue3如何入手开发新项目

前言 

我们打开Vite官方网站(https://cn.vitejs.dev/)。

Vite (法语意为 "快速的",发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源。
Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。

这里,我们将Vite与VueCLI做一下对比。

  • Vite在开发模式下不需要打包可以直接运行,使用的是ES6的模块化加载规则;

  • VueCLI开发模式下必须对项目打包才可以运行;

  • Vite基于缓存的热更新;

  • VueCLI基于webpack的热更新;

搭建项目

我们来搭建第一个 Vite 项目,我这里使用Yarn依赖管理工具进行创建项目。

yarn create @vitejs/app

在命令行键入以上命令,然后你可能会等待一会儿~

依次配置Project nameSelect a template

Project name: vite-project

Select a template: vue-ts

因为,我们这里要是用Vue+Ts开发项目所以我们选择vue-ts这个模板。一顿操作之后,会提示你键入以下命令,依次填入即可。

cd vite-project
yarn
yarn dev

这样我们搭建项目就完成了。

项目文件夹一览

我们会看到以下文件及其文件夹。

node_modules  ---依赖文件夹
public  ---公共文件夹
src  ---项目主要文件夹
.gitignore  ---排除git提交配置文件
index.html  ---入口文件
package.json  ---模块描述文件
tsconfig.json  ---ts配置文件
vite.config.ts  ---vite配置文件

开发前配置

在开发之前呢,我们需要做以下工作。

1. 编辑ts配置文件

根据需要,配置需要的配置项。compilerOptions里面配置的是编译时的配置项,include项是配置生效包括在内的路径,而exclude则恰恰相反,排除在外的路径。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["vite/client"],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts&
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值