启动本地开发环境(自带热启动)yarn serve

news2024/12/23 22:19:13

文章目录

      • 1. 安装 Yarn
        • 使用 npm 安装 Yarn
        • 使用 Chocolatey 安装 Yarn(Windows 用户)
        • 使用 Homebrew 安装 Yarn(macOS 用户)
      • 2. 安装项目依赖
      • 3. 启动项目
        • 开发模式启动
        • 生产模式启动
      • 4. 构建项目
        • 开发模式构建
        • 生产模式构建
      • 5. 其他常用命令
      • 6. 部署到 OSS
        • 部署开发环境构建结果
        • 部署生产环境构建结果
      • 7. 同时部署开发和生产环境
      • 8. 运行 ESLint 检查
      • 总结

要使用 Yarn 启动你提供的项目,可以按照以下步骤进行操作:
package.json

{
  "name": "order-mid-manage",
  "version": "1.0.0",
  "private": true,
  "author": "沙漏",
  "scripts": {
    "serve": "concurrently \"vue-cli-service serve\"",
    "dev": "concurrently \"vue-cli-service serve\"",
    "serve:dev": "concurrently \"vue-cli-service serve  --mode development\"",
    "serve:prod": "concurrently \"vue-cli-service serve  --mode production\"",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode development",
    "dev-to-oss": "node deploy.js dat",
    "build:dev-to-oss": "vue-cli-service build --mode development && node deploy.js dat",
    "build:prod": "vue-cli-service build --mode production",
    "prod-to-oss": "node deploy.js prod",
    "build:prod-to-oss": "vue-cli-service build --mode production && node deploy.js prod",
    "oss:all": "yarn build:dev-to-oss && yarn build:prod-to-oss",
    "build:stage": "vue-cli-service build --mode staging",
    "lint": "vue-cli-service lint",
    "mock": "cd mock && ts-node-dev mock-server.ts",
    "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "jest --clearCache && vue-cli-service test:unit"
  },
  "dependencies": {
    "@tinymce/tinymce-vue": "^3.1.0",
    "@types/moment": "^2.13.0",
    "@types/swiper": "^6.0.0",
    "ali-oss": "^6.17.1",
    "axios": "^0.19.2",
    "clipboard": "^2.0.4",
    "codemirror": "^5.51.0",
    "core-js": "^3.6.4",
    "cors": "^2.8.5",
    "default-passive-events": "^2.0.0",
    "dotenv-cli": "^6.0.0",
    "draggable": "^4.2.0",
    "driver.js": "^0.9.8",
    "echarts": "^5.4.2",
    "element-ui": "^2.15.11",
    "faker": "^4.1.0",
    "file-saver": "^2.0.2",
    "fuse.js": "^3.4.6",
    "js-cookie": "^2.2.1",
    "jsonlint": "^1.6.3",
    "jszip": "^3.2.2",
    "lodash": "^4.17.15",
    "morgan": "^1.9.1",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "path-to-regexp": "^6.1.0",
    "register-service-worker": "^1.6.2",
    "screenfull": "^5.0.1",
    "script-loader": "^0.7.2",
    "simple-progress-webpack-plugin": "^1.1.2",
    "sortablejs": "^1.10.2",
    "swiper": "^10.0.4",
    "tinymce": "^5.1.6",
    "vue": "^2.6.11",
    "vue-awesome-swiper": "^5.0.1",
    "vue-class-component": "^7.2.2",
    "vue-clipboard2": "^0.3.1",
    "vue-count-to": "^1.0.13",
    "vue-i18n": "^8.15.3",
    "vue-image-crop-upload": "^2.5.0",
    "vue-property-decorator": "^8.4.0",
    "vue-router": "^3.1.5",
    "vue-splitpane": "^1.0.6",
    "vue-svgicon": "^3.2.6",
    "vue2-dropzone": "^3.6.0",
    "vuedraggable": "^2.24.3",
    "vuex": "^3.1.2",
    "vuex-module-decorators": "^0.16.1",
    "wangeditor": "^4.7.7",
    "xlsx": "^0.15.5",
    "yamljs": "^0.3.0"
  },
  "devDependencies": {
    "@types/clipboard": "^2.0.1",
    "@types/codemirror": "^0.0.84",
    "@types/compression": "^1.7.0",
    "@types/cors": "^2.8.6",
    "@types/echarts": "^4.4.3",
    "@types/express": "^4.17.2",
    "@types/faker": "^4.1.9",
    "@types/file-saver": "^2.0.1",
    "@types/jest": "^25.1.2",
    "@types/js-cookie": "^2.2.4",
    "@types/jszip": "^3.1.7",
    "@types/lodash": "^4.14.149",
    "@types/morgan": "^1.7.37",
    "@types/node": "^13.7.0",
    "@types/nprogress": "^0.2.0",
    "@types/sortablejs": "^1.10.6",
    "@types/tinymce": "^4.5.23",
    "@types/webpack-env": "^1.15.1",
    "@types/yamljs": "^0.2.30",
    "@vue/cli-plugin-babel": "^4.2.2",
    "@vue/cli-plugin-e2e-cypress": "^4.2.2",
    "@vue/cli-plugin-eslint": "^4.2.2",
    "@vue/cli-plugin-pwa": "^4.2.2",
    "@vue/cli-plugin-router": "^4.2.2",
    "@vue/cli-plugin-typescript": "^4.2.2",
    "@vue/cli-plugin-unit-jest": "^4.2.2",
    "@vue/cli-plugin-vuex": "^4.2.2",
    "@vue/cli-service": "^4.2.2",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.31",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "concurrently": "^5.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^6.1.2",
    "fibers": "^4.0.2",
    "jest": "^25.1.0",
    "lint-staged": "^10.0.7",
    "sass": "~1.26.5",
    "sass-loader": "^8.0.2",
    "style-resources-loader": "^1.3.3",
    "swagger-routes-express": "^3.1.2",
    "ts-jest": "^25.2.0",
    "ts-node-dev": "^1.0.0-pre.44",
    "typescript": "^3.7.5",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-cli-plugin-style-resources-loader": "^0.1.4",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.41.5"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "keywords": [
    "vue",
    "typescript",
    "admin",
    "template",
    "element-ui"
  ],
  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint"
    ]
  }
}

1. 安装 Yarn

首先,确保你已经安装了 Yarn。如果没有安装,可以通过以下命令安装:

使用 npm 安装 Yarn
npm install -g yarn
使用 Chocolatey 安装 Yarn(Windows 用户)
choco install yarn
使用 Homebrew 安装 Yarn(macOS 用户)
brew install yarn

2. 安装项目依赖

进入项目目录,然后使用 Yarn 安装项目依赖:

cd path/to/your/project
yarn install

3. 启动项目

项目依赖安装完成后,你可以使用以下命令启动项目:

开发模式启动
yarn serve

或者使用 dev 脚本:

yarn dev
生产模式启动
yarn serve:prod

4. 构建项目

如果你需要构建项目,可以使用以下命令:

开发模式构建
yarn build:dev
生产模式构建
yarn build:prod

5. 其他常用命令

  • 运行单元测试

    yarn test:unit
    
  • 运行端到端测试

    yarn test:e2e
    
  • 启动 Mock 服务器

    yarn mock
    
  • 生成 SVG 图标组件

    yarn svg
    

6. 部署到 OSS

如果你需要将构建结果部署到 OSS,可以使用以下命令:

部署开发环境构建结果
yarn build:dev-to-oss
部署生产环境构建结果
yarn build:prod-to-oss

7. 同时部署开发和生产环境

如果你想同时部署开发和生产环境的构建结果,可以使用以下命令:

yarn oss:all

8. 运行 ESLint 检查

yarn lint

总结

通过以上步骤,你可以使用 Yarn 成功启动和管理你的项目。Yarn 的命令与 package.json 中的脚本定义一致,因此你可以直接使用 yarn <script-name> 来运行对应的脚本。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2240538.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringCloud框架学习(第二部分:Consul、LoadBalancer和openFeign)

目录 六、Consul服务注册和发现 1.基本介绍 2.下载运行 3.服务注册与发现 &#xff08;1&#xff09;支付服务provider8001注册进consul &#xff08;2&#xff09;修改订单服务cloud-consumer-order80 4.CAP &#xff08;1&#xff09;CAP理论 &#xff08;2&#x…

SAP ABAP开发学习记录——报表选择界面初始值

程序中定义选择界面的部分只是创建输入框&#xff0c;在后续使用中需要自行添加搜索条件&#xff0c;而有关时间或者日期这种&#xff0c;希望自动创建一个默认值&#xff0c;有两种方法&#xff0c;一种是在选择界面初始化时增加语句另外一种是通过在选择界面创建变式实现。 …

16.UE5拉怪机制,怪物攻击玩家,伤害源,修复原视频中的BUG

2-18 拉怪机制&#xff0c;怪物攻击玩家、伤害源、黑板_哔哩哔哩_bilibili 目录 1.实行行为树实现拉怪机制 1.1行为树黑板 1.2获取施加伤害对象&#xff08;伤害源&#xff09; 2.修复原视频中&#xff0c;第二次攻击怪物后&#xff0c;怪物卡在原地不动的BUG 3.怪物攻击玩…

大数据新视界 -- 大数据大厂之 Impala 性能飞跃:动态分区调整的策略与方法(上)(21 / 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Vue3 笔记 (万字速通)

此笔记来至于尚硅谷&#xff0c;仅供笔者复习使用 1. Vue3 简介 2020年9月18日&#xff0c;Vue.js发布版3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;n&#xff09; 经历了&#xff1a;4800次提交、40个RFC、600次PR、300贡献者 官方发版地址&#xff1a;Rele…

Linux基础1

Linux基础1 Linux基础1学习笔记 ‍ 声明&#xff01; ​​​学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章 笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他…

Linux中.NET读取excel组件,不会出现The type initializer for ‘Gdip‘ threw an exception异常

组件&#xff0c;可通过nuget安装&#xff0c;直接搜名字&#xff1a; ExcelDataReader using ConsoleAppReadFileData.Model; using ExcelDataReader; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Task…

320页PDF | 集团IT蓝图总体规划报告-德勤(限免下载)

一、前言 这份报告是集团IT蓝图总体规划报告-德勤。在报告中详细阐述了德勤为某集团制定的全面IT蓝图总体规划&#xff0c;包括了集团信息化目标蓝图、IT应用规划、数据规划、IT集成架构、IT基础设施规划以及IT治理体系规划等关键领域&#xff0c;旨在为集团未来的信息化发展提…

乐维网管平台(六):如何正确管理设备端口

一、什么是端口下联 在网络环境中&#xff0c;端口下联是指网络设备&#xff08;通常是交换机&#xff09;的端口与其他设备相连接的一种网络架构关系。交换机作为网络中的核心连接设备&#xff0c;其端口下联可以连接多种类型的终端设备&#xff0c;如计算机、服务器、IP 电话…

迁移学习相关基础

迁移学习 目标 将某个领域或任务上学习到的知识或模式应用到不同但相关的领域或问题中。 主要思想 从相关领域中迁移标注数据或者知识结构、完成或改进目标领域或任务的学习效果。 概述 Target data&#xff1a;和你的任务有直接关系的数据&#xff0c;但数据量少&#xff…

Diffusion Policy——斯坦福机器人UMI所用的扩散策略:从原理到其编码实现(含Diff-Control、ControlNet详解)

前言 本文一开始是属于此文《UMI——斯坦福刷盘机器人&#xff1a;从手持夹持器到动作预测Diffusion Policy(含代码解读)》的第三部分&#xff0c;考虑后Diffusion Policy的重要性很高&#xff0c;加之后续还有一系列基于其的改进工作 故独立成本文&#xff0c;且写的过程中 …

麒麟V10,arm64,离线安装docker和docker-compose

文章目录 一、下载1.1 docker1.2 docker-compose1.3 docker.service 二、安装三、验证安装成功3.1 docker3.2 docker-compose 需要在离线环境的系统了里面安装docker。目前国产化主推的是麒麟os和鲲鹏的cpu&#xff0c;这块的教程还比较少&#xff0c;记录一下。 # cat /etc/ky…

接口测试整体框架

接口测试 1. 接口 接口&#xff0c;也叫api&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;&#xff0c;接口&#xff08;Interface&#xff09;是指不同软件组件或系统之间进行交互的点。接口定义了组件之间如何通信&#xff0c;包括…

2024 ECCV | DualDn: 通过可微ISP进行双域去噪

文章标题&#xff1a;《DualDn: Dual-domain Denoising via Differentiable ISP》 论文链接&#xff1a; DualDn 代码链接&#xff1a; https://openimaginglab.github.io/DualDn/ 本文收录于2024ECCV&#xff0c;是上海AI Lab、浙江大学、香港中文大学&#xff08;薛天帆等…

AI制作ppt

1&#xff0c;kimi&#xff1a; 实际上也是AiPPT.cn这个网站&#xff08;但是有实际次数限制&#xff09; 2&#xff0c;其余专业AI ppt生成网站&#xff1a; &#xff08;1&#xff09;gamma&#xff1a;https://gamma.app/ 大概能制作7~10页左右 free的ppt&#xff0c;其余要…

10款PDF翻译工具的探索之旅:我的使用经历与工具特色!!

在如今的时代&#xff0c;PDF文件已经成为我们工作、学习和生活中不可或缺的一部分。但是&#xff0c;当遇到一些非母语或陌生语言的PDF文档时&#xff0c;这要怎么办呀&#xff01;这时候翻译工具就显得尤为重要了。这也是我所遇到过的难题&#xff0c;现在我将与大家分享几款…

【java】java通过s3访问ceph报错

1.报错信息、背景 工作中起了几个访问ceph的服务pod节点&#xff0c;一段时间后1个节点一直报错Unable to execute HTTP request: Timeout waiting for connection from pool&#xff0c;详细i信息如下图片&#xff0c;有且仅有1个节点报错&#xff0c;其他节点访问正常。看日志…

飞牛私有云访问外网

飞牛私有云 fnOS NAS 是一款有着卓越的性能以及强大的兼容性和智能化的管理界面&#xff0c;它之所以能在 NAS 市场中脱颖而出&#xff0c;是因为 fnOS 基于最新的 Linux 内核&#xff08;Debian发行版&#xff09;深度开发&#xff0c;不仅兼容主流 x86 硬件&#xff0c;还支持…

【iOS】知乎日报第三周总结

【iOS】知乎日报第三周总结 文章目录 【iOS】知乎日报第三周总结前言评论区文字评论区的一个展开效果评论区数据的一个请求修改了主页获取数据的逻辑主页无限轮播图图片主色调的一个获取将一些拓展部分的内容写在分类里小结 前言 本周笔者因为金工实习整个项目进展比较慢&#…

局域网到公网的飞跃:LocalSend + Cpolar让文件传输再无边界

前言 本篇教程主要分享如何在Windows系统中部署开源免费文件传输工具LocalSend&#xff0c;并且结合cpolar内网穿透将其发布至公网实现远程使用进行文件下载传输。localsend是一款基于局域网的文件传输工具&#xff0c;它利用局域网的高速传输特性&#xff0c;实现了设备之间的…