人生苦短，我用 Vite 2.0-CFANZ编程社区

一、使用预设模版（下面都以 npm 为例）:

1、安装：

$ npm init @vitejs/app

2、使用模板：

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

3、然后选取各种预设模板：

vanilla
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts

二、手动安装 Vite（适用于手写前端项目）：

1、安装：

$ npm i -D vite

2、根目录新建 package.json 文件：

{
    "scripts": {
        
        // 由于 vite 通过 -D 安装，vite 命令不能全局使用，如果不添加该脚本，则只能通过 npx vite 开启开发服务器
        // npm run dev 开启 dev 服务器
        "dev": "vite",
        // npm vite build 编译文件，默认为 /dist 目录
        "build": "vite build"
    }
}

3、安装 CSS 预处理器（以 Less 为例）：

// vite 中已经配置好了各种预处理器，只用安装相应处理器就完事
$ npm i -D less

4、Typescript 由 vite 集成的 esbuild 编译，速度相当快，直接用

5、示例文件：
index.html 为根目录入口文件：

<html>
    <title>Title</title>
    <style lang="less">
        body {
            background-color: red;
            p {
                font-size: 20px;
            }
        }
    </style>
    <body>
        <p>Hello world</p>
        <div id="pic"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

main.ts：

// 在 ts / js 文件中引入 静态资源 、样式文件
import imgSrc from '/src/image/pic.png';
import '/src/styles/otherStyles.less';

document.getElementById('pic').innerHTML = `<img src="{$imgSrc}" alt="picture"/>`;

其它更多配置可以参考官方文档：https://cn.vitejs.dev/guide/