携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

前言

• 前面学习了如何使用vite创建vue项目，这一节，我们来使用vite创建vue3、vue2、react的项目来实战下

Vite 创建 Vue3 项目

创建项目

• 创建 vite 项目

yarn create vite

• 选择创建 vue 模版创建项目
• 或者直接通过附加命令创建模版

yarn create vite my-vue-app --template vue

运行项目

使用命令运行项目

npm run dev
yarn dev

启动本地服务即可访问项目

修改 vite 配置 ip 访问项目

• vite 启动后出现 “ Network: use --host to expose ”

vite v2.3.7 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

• 是因为IP没有做配置，所以不能从IP启动，需要在 vite.config.js做相应配置： 在 vite.config.js中添加 server.host 为 0.0.0.0

export default defineConfig({
    plugins: [
        vue(),
        ],
    // 在文件中添加以下内容
    server: {
        host: '0.0.0.0'
    }
})

• 重新启动后显示

vite v2.3.7 dev server running at:

  > Local:    http://localhost:3000/
	> Network:  http://192.168.199.127:3000/

在项目中使用 JSX

• 添加 [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) 插件

yarn add @vitejs/plugin-vue-jsx 

• 修改 vite 配置

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()],
  server: {
    host: "0.0.0.0",
  },
});

• 在项目中创建 jsx 文件，并引入到页面

import { defineComponent } from "vue";

export default defineComponent({
  setup(){
    return () =>{
      return <div>Hello vue3 jsx</div>
    }
  }
})

• 项目就可以解析 JSX 了

Vite 创建 Vue2 的项目

手动创建项目

yarn create vite 

• 选择 vanilla 原生js，没有任何框架集成

? Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla
    vue
    react
    preact
    lit
    svelte

安装 vue2 插件

yarn add vite-plugin-vue2 -D
yarn add vue -S

如果安装版本不一样，可能导致无法运行

"vite-plugin-vue2": "1.6.2"
"vue": "^2.6.14"

通过第三方模版创建 vue2 项目

• 我们可以在社区维护模板中，github.com/vitejs/awes…
• 找到vue2的基础模板 github.com/matt-auckla…
• 直接拷贝模版作为项目初始化

Vite 创建 React 项目

创建项目

yarn create vite

• 选择react模板
• 安装依赖

运行项目

yarn dev

总结

• 这一节，我们介绍了如何使用vite创建vue3、vue2、react项目，方便我们后续开发使用。