使用Vite搭建前端脚手架

Must - 2021-10-11 11:01:09

---

官方文档https://vitejs.cn/guide/#%E6%...搭建步骤环境准备vscodenode.js: v14.17.6yarn: 1.22.15项目初始化执行 yarn create @vitejs/app my-vue-app --template vue,使用vue创建项目my-vue-app;运行报错:

此错误原因是yarn安装目录与数据目录不在win10同一个盘中导致,查看安装、数据目录:
yarn global bin => D:\nodejs-data\global\bin
yarn global dir => C:\Users\DELL\AppData\Local\Yarn\Data\global
修改global dir目录:
yarn config set global-folder D:\nodejs-data\yarn\data\global
然后重新执行项目创建命令.创建成功:
项目启动执行yarn dev启动,报错:

报错原因是没有导入依赖包.执行yarn install导入依赖重新执行yarn dev启动:

启动页面效果:
消除启动警告warning package.json: No license field:编辑package.json文件，文件末尾添加"license": "MIT"vite创建项目结构介绍

执行tree -I 'node_modules'查看项目树形文件结构：

.
|-- README.md
|-- index.html  #html文件
|-- package.json
|-- public
|   `-- favicon.ico
|-- src           #源码目录
|   |-- App.vue   #应用根组件
|   |-- assets    #静态资源
|   |   `-- logo.png
|   |-- components #组件目录
|   |   `-- HelloWorld.vue  #demo组件
|   `-- main.js    #入口js
|-- vite.config.js #vite配置文件
`-- yarn.lock

小结参考https://juejin.cn/post/684490...

Tags 标签

前端vitevue.jshtml5javascript

扩展阅读