Vite介绍

Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。(不知道比webpack快了十几倍，本人亲测)
它主要具有以下特点：

快速的冷启动
即时的模块热更新
真正的按需编译

那废话少说，我们先直接来试用一下。

创建模板项目

我们快速用vite创建一个vue3模板项目:

npm init vite-app vite-test
// or
yarn create vite-app vite-test

当然，创建react项目也是可以的：

npm init vite-app --template react
// or
yarn create vite-app --template react

添加router vuex

yarn add vue-router@next vuex@next

添加eslint支持

以前用eslint总感觉不自在，怎么它这也管那也管？用了一会直接把rules的内容全部注释掉了。就像我把typescript用成了anyScript。但是用了一段时间后，现在写项目已经离不开它了，没有eslint根本没有码字的欲望。想要把eslint作为你辅助写代码的利器，你需要：

打开保存时自动lint，否则看着满屏的错误，手动改会崩溃的
找到一个符合你的规则，这里我用的是业界公认最好的airbnb

yarn add -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue

然后在你的项目根目录创建一个.eslintrc.js，写入以下内容：

module.exports = {
    extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
    },
    plugins: ['vue'],
    rules: {
        //自己写一些想配置的规则
    },
    overrides: [
        {
            files: ['*.vue'],
            rules: {
                //这里写覆盖vue文件的规则
            },
        },
    ],
};

使用sass？

当然你也可以使用其他的css预处理器

yarn add -D sass

配置vite.config.js

在项目根目录下新建一个vite.config.js

import path from 'path';

module.exports = {
    base: './',
    // sourcemap: true,
    minify: 'esbuild',
    // 配置别名
    alias: {
        //vite中alias必须以斜线开头和结尾，暂时未知原因，这样其实挺不方便的
        //所以在eslint配置alias和文件中导入路径也要相应的修改
        '/@/': path.resolve(__dirname, './src'),
    },
    cssPreprocessOptions: {
        //这里注意，键名是scss不是sass！一字之差能让你折腾好久
        scss: {
            //这里写你想导入全局scss变量的路径
            //这里注意只能写相对路径，alias貌似在css中不会生效
            additionalData: "@import './src/style/a.scss';",
        },
    },
    // 配置Dep优化行为
    optimizeDeps: {
        include: ['lodash-es'],
    },
};

配置eslint的alias

上面只配置了vite的alias，让vite在运行时能找到文件位置。但是eslint的alias也是要配置的，否则你在写代码时，eslint会提示找不到文件路径。因为eslint不会去读取vite.config.js，它们二者没有关联。所有我们需要添加一个eslint插件

yarn add -D eslint-import-resolver-alias

然后在.eslintrc.js中追加一下内容：

module.exports = {
    //之前的内容，这里已省略
    settings: {
        'import/resolver': {
            alias: {
                map: [
                    ['/@', './src'],
                ],
                extensions: ['.ts', '.js', '.jsx', '.json', '.vue'],
            },
        },
    },
};

具体到文件

//必须以斜线开头！
import xx from '/@/xx.vue';

最后编辑于：2020.10.20 10:44:01