蓝景脚手架使用手册

​ 通过脚手架统一初始化项目基本结构 搭配 Eslint 和 Prettier 实现代码风格的统一 自动创建 Gitee 云仓库和 Coding 的持续集成任务 实现更新代码时能自动打包上线 后期能通过腾讯云前端性能监控查看项目运行情况

架构图

准备工作

​ 蓝景脚手架是基于 腾讯云对象存储 、 腾讯云 Coding 、腾讯云前端性能监控、 腾讯云集群 、 码云 而实现自动化部署

获取腾讯云对象存储身份密钥

• 开通腾讯云对象存储 (opens new window)
• 右上角进入 个人中心 ➡️ 访问管理 ➡️ 访问密钥 ➡️ API 密钥管理 ➡️ 新建密钥
• 记录下 secretId 和 secretKey
• 进入 存储桶列表 ➡️ 创建存储桶 记录名称那一栏的 存储桶名称的后缀数值

获取 Coding 团队名称和身份密钥

• 开通 Coding (opens new window)
• 记录 Coding 的团队名称
• 进入 Coding 平台后 右上角进入 个人账户设置 ➡️ 访问令牌 ➡️ 新建令牌
• 权限全选勾选 记录下 token

Coding 绑定 SSH 公钥

命令	说明
ls -al ~/.ssh	检查本地电脑 SSH keys 是否存在
ssh-keygen -t rsa -C "邮箱地址"	生成新的 ssh key
直接回车键	跳过设置 passphrase
[pbcopy｜clip] < ~/.ssh/id_rsa.pub	[Mac｜Window] 复制公钥

• 将公钥设置到 个人账户设置 ➡️ SSH 公钥

获取码云的私人令牌

• 注册码云 (opens new window)
• 右上角进入 个人中心 ➡️ 私人令牌 ➡️ 生成新令牌

码云绑定 SSH 公钥

• 将公钥设置到 个人中心 ➡️ 安全设置 ➡️ SSH 公钥

获取腾讯云前端性能监控业务系统 ID

• 开通前端性能监控 (opens new window)
• 进入 应用管理 ➡️ 业务系统 ➡️ 创建业务系统
• 记录 业务系统 ID
• 每天 前五十万条数据是免费

注册专属域名 (opens new window)

全局安装蓝景脚手架

npm install @bluejj/bluej-cli -g

Vue 开发

​ 基于蓝景脚手架初始化 Vue 目录 自动配置好 Gitee 的代码云仓库、 Coding 的持续集成、前端性能监控、对象存储存储桶

项目初始化

1. NodeJs 版本要求 14.0.0 以上

2. 运行 npm update @bluejj/bluej-cli -g 保证蓝景脚手架是最新版的～

3. 在项目根目录运行 bluej init 开始初始化项目 选择 Vue

   

4. 如果电脑没有安装 Vue 脚手架会自动安装最新版 Vue-cli

   

5. 输入项目名称和项目描述

   

6. 自动接入 Vue-cli 的安装步骤

   

7. 完成文件安装后 自动进入腾讯云对应配置的设置

   • 第一次使用脚手架初始化 需要配置腾讯云对应的 secretId、secretKey、存储桶后缀数值、域名、前端性能业务系统 ID
   • 完成设置后 记得起个好名字 方便下次直接使用哦～

   

8. 配置码云的私人令牌 记得选择 非公司项目

9. 配置 Coding 身份密钥和团队名称

10. 到此为止 初始化完毕～～

项目发布

1. 运行 Git 四步曲提交代码到码云的 master 分支会自动触发 Coding 的打包发布流程

2. 等待构建完成后 会自动将打包后的代码自动推送到腾讯云的对象存储 在最后一步打印中可以看到访问域名

3. 通过前端性能监控可以观测到网站的访问情况