006初始化前端Vue3项目

006初始化前端Vue3项目

执行npm init vue命令初始化

• 相关推荐选择项如下

Windows PowerShell
版权所有（C） Microsoft Corporation。保留所有权利。

安装最新的 PowerShell，了解新功能和改进！https://aka.ms/PSWindows

PS D:\Web\iot> cnpm init vue

Vue.js - The Progressive JavaScript Framework

√ Project name: ... iot-web
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in D:\Web\iot\iot-web...

Done. Now run:

  cd iot-web
  npm install
  npm run lint
  npm run dev

PS D:\Web\iot> 

Vue3项目的目录结构详解

node_modules：通过 npm install 下载安装的项目依赖包
public：存放静态资源公共资源，不会被压缩合并
  —favicon.ico：网站图标
src：项目开发主要文件夹
  —api：接口请求处理
  —assets：静态文件，存放图片
  —components：存放组件
  —router：存放路由，实现界面跳转
  —store：与状态管理相关
  —styles：存放样式
  —utils：常用功能封装
  —views：界面组件
  —App.vue：根组件
  —main.js：入口文件
.gitignore：用来配置那些文件不归git管理
package.json：项目配置和包管理文件（项目依赖和技术）
README.md：说明文档，主要看项目运行的命令
vue.config.js：项目配置信息：跨域proxy代理