丁鹿学堂：使用vite手动构建vue项目的注意事项和步骤总结

使用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”

index.js 的内容：

// 引入vueimport { createApp } from "vue/dist/vue.esm-bundler.js";// 创建根组件const App = {data(){return {msg:'hello vue'}},template:"{{msg}}"}// 实例化并挂载到页面createApp(App).mount('#app')

配置package.json

"scripts": {"dev":"vite --open","build":"vite build"}

最后，运行yarn dev 即可运行成功项目。

有人说了，用vite了还手动配置，不是脱裤子放屁吗？我们手动配置，式为了更好的理解vite脚手架的原理。

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