丁鹿学堂：手动使用vite构建工具创建vue项目案例分享使用yarn 默认安装了nodeJS环境，使用yarn，比npm

使用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脚手架的原理。

我们熟悉一下这个过程，可以更了解。