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

柔光的暖阳◎ 2023-09-27 11:20 141阅读 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

# 使用 npm
    npm init vite@latest
    
    # 使用 yarn
    yarn create vite
    
    # 使用 pnpm
    pnpm create vite

## 2、步骤演示 ##

### 第一步：执行创建命令 ###

**命令**

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

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 文件！

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

## 2、支持 JSX 写法 ##

### 第一步：安装 JSX 插件 ###

> 使用 npm 可能会出问题！

yarn add @vitejs/plugin-vue-jsx

### 第二步：修改 vite.config.js 文件 ###

import {
         defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    // 导入 vueJsx
    import vueJsx from '@vitejs/plugin-vue-jsx'
    
    // https://vitejs.dev/config/
    export default defineConfig({
        
      // 调用 vueJsx()
      plugins: [vue(), vueJsx()],
    })

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

import { defineComponent } from "vue";
    
    export default defineComponent({
        setup() {
            return () => <div>Hello JSX !</div>;
        }
    });

### 第四步：删除 App.vue 文件 ###

![image-20220924112356384][]

### 第五步：修改 main.js 文件 ###

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

### 第六步：运行访问 ###

![image-20220924112828681][]

[image-20220924110446033]: https://img-blog.csdnimg.cn/img_convert/84d036cca16b3d2c23878ba0c90a893e.png
[image-20220924110506152]: https://img-blog.csdnimg.cn/img_convert/d13b4a0ff3b027836471acbed240fd8c.png
[image-20220924110528735]: https://img-blog.csdnimg.cn/img_convert/88a693f9cbf0141a86e3bb1911ae944b.png
[image-20220924110610914]: https://img-blog.csdnimg.cn/img_convert/43e942ee1c3226b5332111665da40d26.png
[image-20220924110719929]: https://img-blog.csdnimg.cn/img_convert/acdf885556db6337a5b783992ad360ce.png
[image-20220924110815839]: https://img-blog.csdnimg.cn/img_convert/070ed75793b26c42fd145af3eeb2908f.png
[image-20220924110903131]: https://img-blog.csdnimg.cn/img_convert/a92bd54b8b2af09b09dd8e0cb70dcadc.png
[image-20220924111006184]: https://img-blog.csdnimg.cn/img_convert/dd33111241cdb05f85717e446fce6881.png
[image-20220924111317527]: https://img-blog.csdnimg.cn/img_convert/785c56ded4c99996a6fb669e3976c7c3.png
[image-20220924112356384]: https://img-blog.csdnimg.cn/img_convert/247e63a301be90219596d08196c5d3f7.png
[image-20220924112828681]: https://img-blog.csdnimg.cn/img_convert/affbdaceb6f3c2cbe0c5d52ae22eff6d.png