使用yarn
默认安装了nodeJS环境，使用yarn，比npm更好用。
npm install --global yarn
使用yarn按钻过vite
yarn add -D vite
使用yarn初始化项目
yarn init -y
安装vite
yarn add vite -D
安装vue
yarn add vue
项目目录：
创建index.html
src/index.js
index.html内容：
注意，这里script引入的js ，要加上type=“module”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="./src/index.js" type="module"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js 的内容：
// 引入vue
import { createApp } from "vue/dist/vue.esm-bundler.js";
// 创建根组件
const App = {
data(){
return {
msg:'hello vue'
}
},
template:"<div>{{msg}}</div>"
}
// 实例化并挂载到页面
createApp(App).mount('#app')
配置package.json
"scripts": {
"dev":"vite --open",
"build":"vite build"
}
最后，运行yarn dev 即可运行成功项目。
有人说了，用vite了还手动配置，不是脱裤子放屁吗？我们手动配置，式为了更好的理解vite脚手架的原理。
我们熟悉一下这个过程，可以更了解。
