使用Vite搭建前端脚手架

官方文档

搭建步骤

环境准备

  • 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搭建前端脚手架_第1张图片
    此错误原因是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搭建前端脚手架_第2张图片

项目启动

  1. 执行yarn dev启动,报错:
    使用Vite搭建前端脚手架_第3张图片
    报错原因是没有导入依赖包.
  2. 执行yarn install导入依赖
  3. 重新执行yarn dev启动:
    使用Vite搭建前端脚手架_第4张图片
    启动页面效果:
    使用Vite搭建前端脚手架_第5张图片
  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...

你可能感兴趣的