# vite-vue

**Repository Path**: johnyucn525/vite-vue

## Basic Information

- **Project Name**: vite-vue
- **Description**: 使用vite管理vue的开发全过程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-21
- **Last Updated**: 2024-09-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 使用vite管理vue的开发过程
---
---
## 步骤一：基本

1. vite 创建一个项目,引入vue,在main.js中完成基本的需求
```
npm create vite@latest
```
2. 然后选择'Vanilla'->'JavaScript',最后创建出项目文件夹
```
npm install vue
```
3. 成果：
main1,main2,main3,main4

## 步骤二：组件
1. 使用标准js function +[string|render()]组件，Hello1.js
2. 使用 setup +[string|render()],Hello2.js,Hello3.js
3. 使用 setup+ 内部template ，Hello4.js
4. 使用 setup +index.html模板,Hello4.js
5. 使用JSX，Hello5.jsx
需要加入@vitejs/plugin-vue-jsx和项目根的文件： vite.config.js

```
import {defineConfig} from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
    plugins:[vueJsx()]
})
```
​
## 步骤三：

引入@vitejs/plugin-vue，使用SFC方式，Hello6.vue
```
import {defineConfig} from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'; //与Hello5.jsx相关联的引入
import vue from '@vitejs/plugin-vue'; //与Hello6.vue相关联的引入

export default defineConfig({
    plugins:[vueJsx(),vue()]
})
```

## 步骤四：
1. 加入真Dom渲染技术： main_dom.js
2. 加入vnode渲染技术，此vnode是由h函数生成： main_render.js
3. 加入编译技术，此vnode是由compile函数生成： main_compile.js