【Vite基础】001-使用 Vite 创建 vue3 项目

柔光的暖阳◎ 2023-09-27 11:20 248阅读 0赞

【Vite基础】001-使用 Vite 创建 vue3 项目

文章目录

  • 【Vite基础】001-使用 Vite 创建 vue3 项目
  • 一、Vite 概述
    • 1、什么是 vite
    • 2、优势
      • vite
      • 其它
  • 二、使用 vite 创建 vue3 项目
    • 1、创建项目
      • 命令
    • 2、步骤演示
      • 第一步:执行创建命令
      • 第二步:设置项目名
      • 第三步:设置包名
      • 第四步:选择框架
      • 第五步:选择语言
      • 第六步:创建完成
      • 第七步:进入目录并安装依赖
      • 第八步:运行项目
      • 第九步:访问项目
      • 第十步:项目结构
  • 三、说明
    • 1、Vite 编译入口
    • 2、支持 JSX 写法
      • 第一步:安装 JSX 插件
      • 第二步:修改 vite.config.js 文件
      • 第三步:在 src 目录创建 App.jsx 文件
      • 第四步:删除 App.vue 文件
      • 第五步:修改 main.js 文件
      • 第六步:运行访问

一、Vite 概述

1、什么是 vite

项目构建工具。

2、优势

vite

方便,更快,更好用;

用了 esbuild 编译快。

其它

webpack 更全面;

rollup 更专一;

二、使用 vite 创建 vue3 项目

1、创建项目

命令

官网:http://www.vitejs.net/guide/\#scaffolding-your-first-vite-project

  1. # 使用 npm
  2. npm init vite@latest
  3. # 使用 yarn
  4. yarn create vite
  5. # 使用 pnpm
  6. pnpm create vite

2、步骤演示

第一步:执行创建命令

命令

第一次可能会提示安装,输入 y 即可!默认创建的是 vue3 项目!

  1. npm init vite@latest

截图

image-20220924110446033

第二步:设置项目名

直接输入,如 vite-vue3

image-20220924110506152

第三步:设置包名

默认和项目名一致,我这里就不设置,直接回车了!

第四步:选择框架

按上下箭头键选择框架!

image-20220924110528735

第五步:选择语言

这里直接选 js 了,后面会专门有一篇文章记录 ts !

image-20220924110610914

第六步:创建完成

image-20220924110719929

第七步:进入目录并安装依赖

image-20220924110815839

第八步:运行项目

npm run dev

image-20220924110903131

第九步:访问项目

http://127.0.0.1:5173/

image-20220924111006184

第十步:项目结构

image-20220924111317527

三、说明

1、Vite 编译入口

一定是一个 html 文件!

  1. // 加载 main.js
  2. <script type="module" src="/src/main.js"></script>

2、支持 JSX 写法

第一步:安装 JSX 插件

使用 npm 可能会出问题!

  1. yarn add @vitejs/plugin-vue-jsx

第二步:修改 vite.config.js 文件

  1. import {
  2. defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. // 导入 vueJsx
  5. import vueJsx from '@vitejs/plugin-vue-jsx'
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8. // 调用 vueJsx()
  9. plugins: [vue(), vueJsx()],
  10. })

第三步:在 src 目录创建 App.jsx 文件

  1. import { defineComponent } from "vue";
  2. export default defineComponent({
  3. setup() {
  4. return () => <div>Hello JSX !</div>;
  5. }
  6. });

第四步:删除 App.vue 文件

image-20220924112356384

第五步:修改 main.js 文件

  1. import {
  2. createApp } from 'vue'
  3. import './style.css'
  4. // 去掉 .vue 使其指向 App.jsx
  5. import App from './App'
  6. createApp(App).mount('#app')

第六步:运行访问

image-20220924112828681

发表评论

表情:
评论列表 (有 0 条评论,248人围观)

还没有评论,来说两句吧...

相关阅读