vite创建vue2项目（node版本16及以上）
初始化项目
- npm create vite
- 选择 vanilla （纯js/ts类型项目）
安装包
- npm i vue@2
- npm i vite-plugin-vue2 vue-template-compiler -D
新建文件目录
根目录新建 vite.config.js 文件
import { defineConfig } from "vite";
import {createVuePlugin} from 'vite-plugin-vue2'
export default defineConfig({
plugins:[
createVuePlugin()
]
})
删除根目录的 main.js / style.css等,新建src目录,并修改index.html中的script
<template>
<div>
hello vite-vue2 {{name}}
</div>
</template>
<script>
export default {
components: {
},
props: {
},
data() {
return {
name:"bwf"
};
},
};
</script>
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: "#app",
render: h => h(App)
})
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
执行 npm run dev / npm run build 成功
package.json 相关版本信息
"devDependencies": {
"vite": "^4.4.5",
"vite-plugin-vue2": "^2.0.3",
"vue-template-compiler": "^2.7.14"
},
"dependencies": {
"vue": "^2.7.14"
}
