启动本地开发环境(自带热启动)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.…

JSP执行过程及其与Servlet执行效率的比较

JSP&#xff08;Java Server Pages&#xff09;和Servlet都是Java Web开发中常用的技术&#xff0c;它们都用于动态生成Web页面。然而&#xff0c;JSP和Servlet在执行过程和效率上存在一些差异。本文将详细探讨JSP的执行过程&#xff0c;并比较JSP与Servlet的执行效率。 一、J…

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…

计算机低能儿从0刷leetcode | 38.外观数列

题目&#xff1a;38. 外观数列 思路&#xff1a;这一题感觉仅仅难在了阅读理解上&#xff0c;搬了评论里一位朋友的中译中&#xff1a; 1 11 21 1211 111221 一步一步来 给一个数&#xff0c;这个数是1描述上一步的数&#xff0c;这个数是 1 即一个1&#xff0c;故写作11…

iSCSI 和SCSI的概述

一、定义与基础 SCSI 定义&#xff1a;SCSI是一种并行接口标准&#xff0c;用于连接高性能设备&#xff0c;如硬盘驱动器、磁带机和光驱等。基础&#xff1a;SCSI设备通过控制器与计算机系统通信&#xff0c;具有很高的数据传输速率和可靠性。 iSCSI 定义&#xff1a;iSCSI是一…

关于 Oracle Database Express Edition 的功能和安装

Oracle Database Express Edition&#xff0c;简称 Oracle Database XE。是一个免费的版本&#xff0c;主要用于培训和一些功能要求比较简单&#xff0c;又需要免费分发的场景。 看看官方的说明&#xff1a; Whether you are a developer, a DBA, a data scientist, an educat…

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

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

day57 图论章节刷题Part08(拓扑排序、dijkstra(朴素版))

拓扑排序-117. 软件构建 思路&#xff1a;拓扑排序是经典的图论问题。给出一个有向图&#xff0c;把有向图转成线性的排序就叫拓扑排序&#xff0c;拓扑排序也要检测有向图是否有环&#xff0c;即存在循环依赖的情况&#xff0c;因为这种情况是不能做线性排序的&#xff0c;所…

同局域网ssh连接wsl2

同局域网ssh连接wsl2 简介 如果在Windows使用Ubuntu系统而不想使用虚拟机&#xff0c;wsl是一种不错的选择&#xff0c;提供了一个相对传统虚拟机还不错的功能&#xff0c;但是如果我们想远程这个wsl则是比较麻烦&#xff0c;这里主要介绍一下如何在同一个局域网下使用ssh连接…

Vue.插槽使用指南,实现高复用组件

前言 在现代前端开发中&#xff0c;组件化开发已经成为主流&#xff0c;其中 Vue.js 的插槽&#xff08;slots&#xff09;特性为我们构建灵活、可复用的组件提供了强有力的支持。本文将深入探讨 Vue.js 插槽特性&#xff0c;包括基础插槽、具名插槽、作用域插槽、动态插槽名和…

在C++上实现反射用法

0. 简介 最近看很多端到端的工作&#xff0c;发现大多数都是基于mmdet3d来做的&#xff0c;而这个里面用的比较多的形式就是反射机制&#xff0c;这样其实可以比较好的通过类似plugin的形式完成模型模块的插入。当然我们这里不是来分析python的反射机制的。我们这篇文章主要来…

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

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