# vue2+vite基础工程

**Repository Path**: meng_lingyun_admin/vue2-vite

## Basic Information

- **Project Name**: vue2+vite基础工程
- **Description**: 这里只是一个基本的vite+vue2的工程 不包含其他内容
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-10-10
- **Last Updated**: 2023-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 如何创建一个vite+vue2工程

## 1. 使用npm create vite 或 yarn create vite创建一个普通项目
## 2. 选择创建Vanilla(基础js项目)
## 3. 然后导入所需组件 

```
yarn add vue@2
yarn add vite-plugin-vue2 -D
yarn add vue-template-compiler
```

## 4. 创建App.vue/vite.config.js 并导入对应内容
### App.vue
``` <script>
  export default {
    
  }
  </script>

  <template>
    <div>
      hello vue2
    </div>
  </template>

  <style>
  </style>
```

### vite.config.js
```
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'

export default defineConfig({
  plugins: [createVuePlugin()],
  alias: {
    "@": resolve(__dirname, "/src"),
  },
  server: {
    host: "0.0.0.0",
    hmr: true,
    strictPort: false,
    proxy: {
      "/api": {
        target: "https://video.app.langruiyun.com/api",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      }
    }
  }
})
```

### main.js
```
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')
```

## 5. 使用vite启动项目、使用vite build打包项目
## 6. 其余内容与vite及vue2相关内容一致 这里不再赘述