文章目录
- 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>
来运行对应的脚本。