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

文章目录

      • 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.mzph.cn/pingmian/60378.shtml

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

相关文章

nodejs 020: React语法规则 props和state

props和state 在 React 中&#xff0c;props 和 state 是管理数据流的两种核心机制。理解它们之间的区别和用途是构建 React 应用程序的基础。 一、props 和 state的区别 特性propsstate定义方式由父组件传递给子组件的数据组件内部管理的本地数据是否可修改不可变&#xff…

架构师备考-概念背诵(软件工程)

软件工程 软件开发生命周期: 软件定义时期:包括可行性研究和详细需求分析过程,任务是确定软件开发工程必须完成的总目标,具体可分成问题定义、可行性研究、需求分析等。软件开发时期:就是软件的设计与实现,可分成概要设计、详细设计、编码、测试等。软件运行和维护:就是…

刷题强训(day06) -- 大数加法、链表相加、大数乘法

目录 1、大数加法 1.1 题目 1.2 思路 1.3 代码实现 2、链表相加&#xff08;二&#xff09; 2.1 题目 2.2 思路 2.3 代码实现 3、大数乘法 3.1 题目 3.2 思路 3.3 代码实现 1、大数加法 1.1 题目 1.2 思路 这道题可以模拟列竖式相加解答&#xff0c; 将每一位都转…

Java多线程编程(四)- 阻塞队列,生产者消费者模型,线程池

目录&#xff1a; 一.阻塞队列 二.线程池 一.阻塞队列 1.阻塞队列是⼀种特殊的队列. 也遵守 "先进先出" 的原则 阻塞队列能是⼀种线程安全的数据结构, 并且具有以下特性&#xff1a; 1.1.当队列满的时候, 继续入队列就会阻塞, 直到有其他线程从队列中取走元素 1.…

open3d

open3d open3d用于 3D 数据处理的现代库。 简介 Open3D 是一个开源库&#xff0c;支持快速开发处理 3D 数据的软件。Open3D 前端公开了一组精心挑选的 C 和 Python 数据结构和算法。后端经过高度优化&#xff0c;并设置为并行化。Open3D 是从零开始开发的&#xff0c;具有一更…

洞察鸿蒙生态,把握开发新机遇

随着科技的不断进步&#xff0c;鸿蒙系统以其独特的分布式架构和跨设备协同能力&#xff0c;逐渐在智能手机、智能穿戴、车载、家居等多个领域崭露头角&#xff0c;与安卓、iOS形成三足鼎立之势。作为一名开发者&#xff0c;我对鸿蒙生态的认知和了解如下&#xff1a; 一、鸿蒙…

adb 如何通过wifi连接手机

1. 电脑通过USB线连接手机 1.1手机开启开发者模式 以小米手机为例&#xff1a;连续点击OS版本系统&#xff08;设置–>我的设备–>全部参数&#xff09; 1.2在开发者模式下&#xff0c;启动允许USB安装与USB调试 操作步骤&#xff1a;设置>更多设置>开发者选项&g…

【webrtc】 RTP 中的 MID(Media Stream Identifier)

RTP 中的 MID(Media Stream Identifier) RID及其与MID的区别 cname与mid的对比【webrtc】CNAME 是rtprtcp中的Canonical Name(规范化名称) 同样都是RTP头部扩展: 基于mediasoup的最新的代码,学习,发现mid在创建RtpSendStream时是必须传递的参数: 例如 D:\XTRANS\soup\…

brother:什么是兄弟,你悟了吗?

brother&#xff08;兄弟&#xff09;这个单词好奇怪哦&#xff0c;它为什么就会是兄弟呢&#xff1f;为什么这样书写、这些字母组合在一起&#xff0c;就是兄弟呢&#xff1f;而且&#xff0c;西方人的兄弟brother一词和姐妹sister一词&#xff0c;并不是像中国人所称呼明确指…

如何在谷歌浏览器中优化内存使用

在日常使用电脑的过程中&#xff0c;我们经常会遇到系统资源被大量占用的情况&#xff0c;尤其是内存。谷歌浏览器作为一个广泛使用的网络浏览器&#xff0c;其内存占用问题也备受关注。本文将详细介绍如何在谷歌浏览器中优化内存使用&#xff0c;以提升浏览体验和系统性能。&a…

谷歌浏览器支持的开发者工具详解

谷歌浏览器&#xff08;Google Chrome&#xff09;是全球最受欢迎的网页浏览器之一&#xff0c;它不仅提供了快速、安全的浏览体验&#xff0c;还为开发者提供了强大的开发者工具。本文将详细介绍如何使用谷歌浏览器的开发者工具&#xff0c;并解答一些常见问题。&#xff08;本…

推荐一款多物理场模拟仿真软件:STAR-CCM+

Siemens STAR-CCM是一款功能强大的计算流体力学(CFD)软件&#xff0c;由西门子公司推出。它集成了现代软件工程技术、先进的连续介质力学数值技术和卓越的设计&#xff0c;为工程师提供了一个全面的多物理场仿真平台。主要特点与优势&#xff1a;多物理场仿真、自动化与高效、高…

无人机飞手考证,地面站培训技术详解

无人机飞手考证及地面站培训技术涉及多个关键方面&#xff0c;以下是对这些方面的详细解析&#xff1a; 一、无人机飞手考证流程与要求 1. 证书类型 民用无人机驾驶员证书&#xff1a;这是国家民航局颁发的无人机操作人员资质证书&#xff0c;分为视距内驾驶员、超视距驾驶员…

SpringMVC全面复习

Javaweb SpringMVC Spring MVC是Spring框架的一个模块&#xff0c;专门用于构建Web应用程序的模型-视图-控制器&#xff08;MVC&#xff09;架构。它通过清晰的分离关注点&#xff0c;简化了Web应用各部分的开发。Spring MVC提供了强大的绑定机制&#xff0c;能够将请求参数绑定…

python基础大杂烩

命令提示符程序&#xff0c;输入python&#xff0c;运行python程序 代码通过解释器程序翻译给计算机去执行 命令提示符输入的python本质上就是调用D:/dev/python/python3.12.5/python.exe这个解释器程序 有python程序将输入的代码翻译成二进制的0和1&#xff0c;去向计算机去运…

MathGPT的原理介绍,在中小学数学教学的应用场景,以及代码样例实现

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下MathGPT的原理介绍&#xff0c;在中小学数学教学的应用场景&#xff0c;以及代码样例实现。MathGPT的核心架构是一个精心设计的多层次系统&#xff0c;旨在有效处理复杂的数学问题。其主要组成部分包括 数学知识图谱…

算法演练----24点游戏

给定4个整数&#xff0c;数字范围在1~13之间任意使用-*/&#xff08;&#xff09;&#xff0c;构造出一个表达式&#xff0c;使得最终结果为24&#xff0c; 方法一 算法分析&#xff1a;加括号和取出重复表达式 # 导入精确除法模块&#xff0c;使得在Python2中除法运算的行为更…

关于指针p有关的3个值

1&#xff0c;他的类型是int*; 2,*p是解用&#xff0c;指向的是对象 3&#xff0c;&p指向的是p的地址&#xff0c;是指针的地址

《JavaEE进阶》----20.<基于Spring图书管理系统①(登录+添加图书)>

PS&#xff1a;关于接口定义 接口定义&#xff0c;通常由服务器提供方来定义。 1.路径&#xff1a;自己定义 2.参数&#xff1a;根据需求考虑&#xff0c;我们这个接口功能完成需要哪些信息。 3.返回结果&#xff1a;考虑我们能为对方提供什么。站在对方角度考虑。 我们使用到的…

Linux服务管理-iSCSI

iSCSI 基础知识 iSCSI&#xff08;Internet Small Computer System Interface&#xff09;协议是一种基于IP网络的存储协议&#xff0c;它允许主机&#xff08;计算机或服务器&#xff09;通过TCP/IP网络访问远程存储设备。该协议具有以下主要特点&#xff1a; 灵活性&#xf…