关于前端:使用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…