# **Vite创建Vue2项目**
## **使用vite创建基础项目 创建方式**
``` bash
$ npm create vite@latest
```
## **输入项目名**
``` bash
? Project name: vue2-project
```
## **选择框架**
``` bash
? Select a framework: » - Use arrow-keys. Return to submit.
> vanilla // 原生js
vue // vue3
react // react
preact // 轻量化react框架
lit // 轻量级web组件
svelte // svelte框架
```
这里需要选择的是vanilla，因为选择vue直接创建的就是vue3项目
``` bash
? Select a variant: >>Use arrow-keys. Return to submint.
> vanilla
vanilla-ts
```
如果你要用typescript的话就选着vanilla-ts
## **进入项目安装vue2插件**
官方处理方式
``` bash
$ cd vue2
$ npm install
$ npm install vite-plugin-vue2 -D
```
新建vite.config.js文件
``` js
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
const path = require('path')
function resolve_path(dir) {
return path.join(__dirname, './', dir)
}
export default {
plugins: [
createVuePlugin( /* options */ )
],
resolve: {
alias: {
'@': resolve_path('src')
}
},
server: {
port: 5000,
}
}
```
## **安装vue**
由于直接npm install vue安装的是最新的vue，即vue3，所以在安装vue的时候需要带上你所需的版本号
``` bash
$ npm install vue@2.6.14 -S
```
## **修改项目结构**
创建src文件夹
将 main.js 移入src 文件夹中，并修改：
``` js
// main.js
import Vue from "vue";
import App from "./App.vue"
new Vue({
el: "#app",
render: (h) => h(App)
}).$mount();
```
修改 index.html 中对 main.js 的引用路径：
``` html
<script type="module" src="/src/main.js"></script>
```
在src文件中创建App.vue，并修改：
``` html
<template>
<div>Vue 2</div>
</template>
```
## **启动项目**
``` bash
npm run dev
```
## **报错**
修复：
··· bash
npm i -S vue-template-compiler
···
## **重新启动**
