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