octopus-pro

安装

初始化

在正式安装之前，您需要使用VueCli初始化一个项目，我们建议您使用如下的配置

1. 包含的特性
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◉ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

2. CSS Pre-processors选择Dart-sass
   ❯ Sass/SCSS (with dart-sass)
   Sass/SCSS (with node-sass)
   Less
   Stylus

3. Lint特性选择 Lint on save
   ◉ Lint on save
   ◯ Lint and fix on commit

4. 配置文件以单文件的形式保存
   ◉ In dedicated config files ◯ In package.json

安装octopus-pro

在完成一个典型Vue项目的初始化后，你只需要输入如下命令即可将我们的样板代码安装到项目中

vue add octopus-pro

期间你上下移动箭头或者输入来作出以下选择：
1、导入Element的形式,您可以根据需要选择

？We will import Element-UI for you, which type do you want to import it?
> Fully import
  Import on demand

2、是否引入Mock服务模块？我建议您始终选择引入（默认值为引入），因为即使你用不到，他也不会产生任何影响

? Do you want import a mock server? (Y/n)
# 建议您键入 Y 或者直接按下 Return

3、是否使用hash路由，建议选择'是'，如果您选择了否，则启用history模式，那么不要忘记在服务器上做相应的配置

? Do you want use a hash router? (Y/n)
# 建议您键入 Y 或者直接按下 Return

4、是否插入错误搜集SentrySDK相关代码，建议您选择是,阅读相关文档 :::warning 需要注意的是，如果你选择了是，那么你还需要在sentry平台申请创建一个项目并获取到对应的DSN :::

? Do you need use SentrySDK in this project ? (Y/n)
# 建议您键入 Y 或者直接按下 Return

做完这些操作后，Octopus-Pro将为您生成项目并安装依赖

目录结构

我们已经为你生成了一个完整的开发框架，提供了中后台开发的基础界面和功能，下面是整个项目的目录结构。

├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── api               # 本地静态资源
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── config               # 集成测试用例
│   ├── layout               # 通用布局
│   ├── plugins              # 全局 dva model
│   ├── views                # 业务页面入口和常用模板
│   ├── utils                # 工具库
│   ├── App.vue
│   └── main.js              # 入口JS
├── .env.xxx                 # 环境变量注入文件
├── .eslintrc.js             
├── .stylelintrc.js
├── vue.config.js            # vue cli配置
├── README.md
└── package.json

本地开发

安装依赖,我们建议使用yarn进行包管理工具

yarn 

如果你使用npm,则使用

npm install

然后敲入命令即可进行开发

yarn dev # 或者yarn serve,如果您用npm,则键入npm run dev或者npm run serve

启动完成后打开上面的链接 http://localhost:8006，如果能看到下面的页面就代表成功了。 接下来你可以修改代码进行业务开发了，我们内建了基础UI界面、Mock数据(可选)、状态管理、权限路由配置等实用功能用于辅助开发，你可以继续阅读和探索官网文档。