Vite 开发快速入门

文章目录

• ​​Vite 简介​​

• ​​优点​​
• ​​缺点​​
• ​​相关文献​​

• ​​安装及创建项目​​

• ​​Vite创建Vue3项目​​
• ​​Vite创建Vue2项目​​
• ​​Vite创建React项目​​

• ​​Vite中使用CSS​​

• ​​1. Vite是自动支持css的​​
• ​​2. Vite支持pre-processors​​
• ​​3. 支持原生css variable​​
• ​​4. 配置别名​​
• ​​5. css中引入其他css文件​​
• ​​6. 支持css-modules​​

• ​​Vite中使用TypeScript​​

• ​​1. 对于Vite中`.ts`文件​​
• ​​2. 对于Vite中`.vue`文件​​

• ​​Vite中处理静态资源​​

• ​​1. 处理图片​​
• ​​2. import url 的参数​​
• ​​3. 处理JSON​​

• ​​Vite 集成 eslint 和 prettier​​

• ​​1. 集成 eslint​​
• ​​2. 集成 prettier​​

• ​​Vite中使用环境变量​​

• ​​1. import.meta.env​​
• ​​2. .env.development​​
• ​​3. .env.production​​
• ​​4. .env.test​​

需要相关视频教程的，可以私聊我，免费提供~

Vite 简介

Vite (法语意为 “快速的”，发音 ​​/vit/​​) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 ​​原生 ES 模块​​​ 提供了 ​​丰富的内建功能​​​，如速度快到惊人的 ​​模块热更新（HMR）​​。
• 一套构建指令，它使用 ​​Rollup​​

Vite 意在提供开箱即用的配置，同时它的 ​​插件 API​​​ 和 ​​JavaScript API​​ 带来了高度的可扩展性，并有完整的类型支持。

优点

1. 非常非常的快：比 Vue-cli(基于 Webpack)快 10-100 倍
2. 上手非常简单：没有很多复杂晦涩的配置，开发效率高
3. 扩展兼容性强：兼容支持 React、Svelte、Preact、Vanilla 等，这意味着 Vite 可以被应用在大多数现代技术栈中。兼容 Rollup 插件，这意味着可以复用 Rollup 生态中大部分已经被反复锤炼的工具

缺点

1. 只能针对现代浏览器（ES2015+）
2. 与 CommonJS 模块不完全兼容

相关文献

• ​​Vite 官方中文文档​​
• ​​github​​

安装及创建项目

Vite创建Vue3项目

Vite创建Vue2项目

Vite创建React项目

• 运行项目：​​npm run dev​​​ 或​​npx vite​​
• 编译项目：​​npm run build​​​ 或​​npx vite build​​

Vite中使用CSS

1. Vite是自动支持css的

2. Vite支持pre-processors

Vite也天然支持sass、less、stylus 等预处理器

只需安装插件， vite 会自动调用

​​npm install sass -D​​

<template>
  <h1 class="text">
    Hello Vue 3 + Vite
    <a href="">vite</a>
  </h1>
</template>

<style scoped lang="scss">.text {
  a {
    color: #42b983;
  }
}</style>

3. 支持原生css variable

css variables 让我们可以在CSS中使用变量了

4. 配置别名

为​​styles​​​文件夹配置别名，方便在项目中引用​​styles​​目录下的文件

​​vite.config.js​​：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
    plugins: [vue(), vueJsx()],
    resolve: {
        alias: {
            "@": "/src/"
        }
    }
})

组件中使用别名：

<script setup>// import '../styles/index.css'
import '@/styles/index.css'</script>

5. css中引入其他css文件

​​other.css​​：

/* other.css中引入index.css */
@import url("@/styles/index.css");

6. 支持css-modules

在 ​​styles​​​ 下创建 ​​test.module.css​​ 文件，该文件会被自动识别成 css modules 的文件

通过 ​​classes.moduleClass​​ 获取样式

Vite中使用TypeScript

TypeScript 简单入门

1. 对于Vite中.ts文件

Vite天生支持TypeScript，并不需要任何插件和配置

但Vite只编译ts，并不会校验

接口​​users​​​中并没有声明​​age​​的类型，TS会报错，但在Vite中能正常编译，控制台和命令行中也都不会报错，并不会校验

如果需要类型校验，则需要配置 ​​tsc--noEmit​​

在 ​​package.json​​ 中：

修改 ​​"build": "vite build"​​​ 为 ​​"build": "tsc --noEmit && vite build"​​

{
  "name": "vite-vue3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.1",
    "@vitejs/plugin-vue-jsx": "^1.1.8",
    "@vue/compiler-sfc": "^3.2.6",
    "sass": "^1.41.0",
    "vite": "^2.5.4"
  }
}

新建 ​​tsconfig.json​​，并配置：

{
    "compilerOptions": {
        "baseUrl": "./src",
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "isolatedModules": true,
        "noEmit": true,
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
    ]
}

这时候执行 ​​npm run build​​​ 或 ​​npx vite​​ 则会进行类型校验，命令行出现了错误信息：

更正错误后，即可正常打包：

2. 对于Vite中.vue文件

安装插件：​​npm install vue-tsc​​

在 ​​package.json​​ 中：

修改 ​​"build": "vite build"​​​ 为 ​​"build": "vue-tsc --noEmit && tsc --noEmit && vite build"​​

{
  "name": "vite-vue3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.6",
    "vue-tsc": "^0.3.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.1",
    "@vitejs/plugin-vue-jsx": "^1.1.8",
    "@vue/compiler-sfc": "^3.2.6",
    "sass": "^1.41.0",
    "vite": "^2.5.4"
  }
}

Vite中处理静态资源

1. 处理图片

1. 在​​.jsx​​ 中引入：

import { defineComponent } from 'vue';
import logo from '@/assets/logo.png';

export default defineComponent({
    setup() {
        return () => {
            return (
                <img src={logo} />
            );
        };
    },
});

1. 在​​.vue​​ 中引入：

<template>
  <img src="/src/assets/logo.png">
  <!-- 或 -->
  <img :src="img">
</template>

<script>import { ref } from "vue";
export default {
  setup () {
    const img = ref('/src/assets/logo.png')
    return { img };
  },
};</script>

2. import url 的参数

​​test.ts​​ ：

interface users {
    name: string;
    age?: number;
}

export const my: users = {
    name: 'bing',
    age: 20,
};

在 ​​.jsx​​ 中：

import { my } from '../src/test';
import test1 from '../src/test?url';
import test2 from '../src/test?raw';

console.log(my); // 打印出对象
console.log(test1); // 打印出路径
console.log(test2); // 打印出内容

3. 处理JSON

import pkg from '../package.json';
import { name, version } from '../package.json';

console.log(pkg); // 打印出整个json
console.log(name, version); // 打印出json中指定的值

Vite 集成 eslint 和 prettier

1. 集成 eslint

1. 安装4个 eslint 插件：​​npm install eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D​​
2. 创建 eslint 的配置文件​​.eslintrc.js​​

module.exports = {
    extends: "standard"
}

1. eslint 可忽略指定文件和目录，创建​​.eslintignore​​ 文件：

build/*.js
src/assets
public
dist

2. 集成 prettier

1. 在 vscode 中安装​​Prettier - Code formatter​​ 插件
2. 创建 prettier 的配置文件​​.prettierrc.js​​

{
    "semi": false,
    "singleQuote": true
}

1. 常见的一些配置

"prettier.printWidth": 1000, // 超过最大值换行
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab，使用空格
"prettier.semi": true, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.parser": "babylon", // 格式化的解析器，默认是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验

Vite中使用环境变量

1. import.meta.env

在vite中可直接使用 ​​import.meta.env​​ 来获取 env 环境变量，正式环境无效

console.log(import.meta.env, import.meta.env.MODE);

2. .env.development

在根目录下创建 ​​.env.development​​​ 文件，并添加自定义属性（自定义属性需要加上前缀​​VITE_​​，才能被获取）

VITE_TITLE=Hello Vite1
VITE_MODE=development

通过​​npm run dev​​​ 或 ​​npx vite​​（开发环境），可获取​​.env.development​​中的自定义属性

console.log(import.meta.env);
console.log(import.meta.env.VITE_TITLE, import.meta.env.VITE_MODE); // 获取自定义属性

3. .env.production

在根目录下创建 ​​.env.production​​​ 文件，并添加自定义属性（自定义属性需要加上前缀​​VITE_​​，才能被获取）

VITE_TITLE=Hello Vite2
VITE_MODE=production

通过​​npm run build​​​ 或 ​​npx vite build​​（生产环境），可获取​​.env.production​​中的自定义属性

console.log(import.meta.env);
console.log(import.meta.env.VITE_TITLE, import.meta.env.VITE_MODE); // 获取自定义属性

4. .env.test

在根目录下创建 ​​.env.test​​​ 文件，并添加自定义属性（自定义属性需要加上前缀​​VITE_​​，才能被获取）

VITE_TITLE=Hello test
VITE_MODE=test

修改 ​​package.json​​ 文件，通过不同的 ​​mode​​ 来改变环境变量读取的方式：

"scripts": {
  "dev": "vite --mode test"
},

通过​​npm run dev​​（通过 mode 读取 ​​.env.test​​ 的环境变量），可获取​​.env.test​​中的自定义属性

console.log(import.meta.env);
console.log(import.meta.env.VITE_TITLE, import.meta.env.VITE_MODE); // 获取自定义属性

非常灵活和方便