使用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. 运行报错:
   
   此错误原因是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. 创建成功:
   

项目启动

1. 执行yarn dev启动,报错:
   
   报错原因是没有导入依赖包.
2. 执行yarn install导入依赖
3. 重新执行yarn dev启动:
   
   启动页面效果:
   
4. 消除启动警告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...