0
点赞
收藏
分享

微信扫一扫

人生苦短,我用 Vite 2.0

花明 2021-09-19 阅读 51
Vitevite

一、使用预设模版(下面都以 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/

举报

相关推荐

0 条评论