Vite 基础

前端框架集成

pnpx create-vite

Vue3集成

默认支持

npm inista @vitejs/app

Vue3-JSX集成

npm i @vitejs/plugin-vue-jsx

配置文件

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueJSX from "@vitejs/plugin-vue-jsx"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),VueJSX()]
})

入口文件

import {defineComponent} from 'vue';

export default defineComponent({
    setup() {
        return () => {
            return (
                <div>
                    <h1>Hello World</h1>
                </div>
            )
        }
    }
})

Vue2集成

选择 vanilla

@vitejs/create-app is deprecated, use npm init vite instead

✔ Project name: … vite-demo-02
✔ Select a framework: › vanilla
✔ Select a variant: › vanilla

Scaffolding project in /Users/pan/4-test/vite-demo-02...

Done. Now run:

  cd vite-demo-02
  npm install
  npm run dev

创建配置文件

// vite.config.js
const { createVuePlugin } = require('vite-plugin-vue2')

module.exports = {
  plugins: [createVuePlugin(/*options*/)],
}

安装vue2.0版本依赖

pnpm add vue
pnpm add 
pnpm add vue-template-compiler -D

入口文件

// main.js
import Vue from 'vue'
import './style.css'
import App from './src/App.vue'
new Vue({
  el: '#app',
  render:h=>h(App)
}).$mount()

React集成

npm init @vitejs/app

@vitejs/create-app is deprecated, use npm init vite instead

✔ Project name: … vite-react
✔ Select a framework: › react
✔ Select a variant: › react

Scaffolding project in /Users/pan/4-test/vite-react...

Done. Now run:

  cd vite-react
  npm install
  npm run dev

第三方资源加载

别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueJSX from "@vitejs/plugin-vue-jsx"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),VueJSX()],
  resolve: {
    alias: {
      '@': 'src',
      "@style": "/src/assets/",  // 使用根路径
    }
  }
})

默认支持css-module

less

默认已集成 less-loader

pnpm add less -D