锐客网

  1. 首页 > it技术 > >

使用Vite搭建前端脚手架

官方文档

  • https://vitejs.cn/guide/#%E6%...
搭建步骤 环境准备
  • vscode
  • node.js: v14.17.6
  • yarn: 1.22.15
项目初始化
  1. 执行 yarn create @vitejs/app my-vue-app --template vue,使用vue创建项目my-vue-app;
  2. 运行报错:
    使用Vite搭建前端脚手架
    文章图片

    此错误原因是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
    然后重新执行项目创建命令.
  3. 创建成功:
    使用Vite搭建前端脚手架
    文章图片
项目启动
  1. 执行yarn dev启动,报错:
    使用Vite搭建前端脚手架
    文章图片

    报错原因是没有导入依赖包.
  2. 执行yarn install导入依赖
  3. 重新执行yarn dev启动:
    使用Vite搭建前端脚手架
    文章图片

    启动页面效果:
    使用Vite搭建前端脚手架
    文章图片
  4. 消除启动警告warning package.json: No license field:编辑package.json文件，文件末尾添加"license": "MIT"
vite创建项目结构介绍
  • 【使用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...

    推荐阅读


    上一篇：Springboot集成swagger实现方式

    下一篇：原理图开发指南