【Vue】pnpm创建Vue3+Vite项目

初始化项目

(1)cmd切换到指定工作目录,运行pnpm create vue命令,输入项目名称后按需安装组件

(2)使用vs code打开所创建的项目目录,Ctrl+~快捷键打开终端,输入pnpm install下载项目所需组件

(3)终端运行pnpm dev启动项目,浏览器访问Local后的地址为项目页面

目录结构

bash 复制代码
│  .eslintrc.cjs ESLint配置文件
│  .gitignore Git忽略文件和目录
│  .prettierrc.json Prettier配置文件
│  cypress.config.ts Cypress配置文件
│  env.d.ts TypeScript声明文件
│  index.html 主页
│  package.json Node.js依赖管理文件
│  README.md MD文档说明文件
│  README_CN.md 中文MD文档说明文件
│  tsconfig.app.json TypeScript配置文件,定义项目中其他文件的ts编译规则
│  tsconfig.json TypeScript配置文件,引用tsconfig.app.json、tsconfig.node.json和tsconfig.vitest.json
│  tsconfig.node.json TypeScript配置文件,定义vite.config.ts文件的编译规则
│  tsconfig.vitest.json TypeScript配置文件,定义Vitest测试框架编译规则
│  vite.config.ts Vite配置文件,定义Vite构建框架的构建行为
│  vitest.config.ts Vitest配置文件,定义Vitest测试框架的环境和行为
├─.vscode vscode配置目录
│      extensions.json 插件配置
│      settings.json 用户配置
├─cypress Cypress自动化测试框架目录
│  ├─e2e 测试用例目录,用于存放测试用例
│  │      example.cy.ts 默认测试用例
│  │      tsconfig.json 配置端到端测试的TypeScript编译选项
│  ├─fixtures 数据目录,存储测试过程中需要的静态测试数据
│  │      example.json 默认示例数据
│  └─support 公共目录,存放测试中需要的工具函数、自定义命令以及可以共享的配置
│          commands.ts 存放全局自定义命令
│          e2e.ts 存放配置设置
├─node_modules 存放所需组件,pnmp install后出现
├─public 存放静态资源,不会经过webpack处理
│      favicon.ico Vue默认图标
└─src 项目核心代码目录
    │  App.vue 根组件,主入口文件
    │  main.ts 应用入口文件,定义全局配置
    ├─assets 静态资源目录,会经过webpack处理
    │      base.css 基础样式文件
    │      logo.svg 默认logo图标
    │      main.css 主要样式文件
    ├─components 组件目录,存放可复用组件
    │  │  HelloWorld.vue Vue默认的示例组件
    │  │  TheWelcome.vue Vue默认的欢迎组件
    │  │  WelcomeItem.vue TheWelcome的子组件
    │  ├─icons 图标组件目录
    │  │      IconCommunity.vue 社区图标组件
    │  │      IconDocumentation.vue 文档图标组件
    │  │      IconEcosystem.vue 生态系统图标组件
    │  │      IconSupport.vue 支持图标组件
    │  │      IconTooling.vue 工具箱图标组件
    │  └─__tests__ 存放与组件相关的测试文件
    │          HelloWorld.spec.ts HelloWorld组件的测试文件
    ├─router 存放路由相关的文件
    │      index.ts 路由配置核心文件,定义应用的路由规则、导航守卫和路由命名等
    ├─stores 存放Vuex状态管理相关的文件
    │      counter.ts 用于管理与计数器相关的状态和操作
    └─views 存放页面级别的组件
            AboutView.vue 关于页面内容组件
            HomeView.vue 主页内容组件
相关推荐
brzhang2 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol11 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
The_era_achievs_hero15 分钟前
微信131~140
开发语言·javascript·微信
然我20 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林1 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺8 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止8 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms9 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登9 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架