# **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
···
## **重新啟動**
