[comment]: <> (作为公共包子包上传)
[comment]: <> (npm publish --access=public)
# octopus-pro

## 安装
#### 初始化
在正式安装之前，您需要使用[VueCli初始化一个项目](https://cli.vuejs.org/zh/guide/creating-a-project.html)，我们建议您使用如下的配置
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项目的初始化后，你只需要输入如下命令即可将我们的样板代码安装到项目中
```bash
vue add octopus-pro
```
期间你上下移动箭头或者输入来作出以下选择：  
1、导入Element的形式,您可以根据需要选择
```bash
？We will import Element-UI for you, which type do you want to import it?
> Fully import
  Import on demand
```
2、是否引入Mock服务模块？我建议您始终选择引入（默认值为引入），因为即使你用不到，他也不会产生任何影响
```bash
? Do you want import a mock server? (Y/n)
# 建议您键入 Y 或者直接按下 Return
```

3、是否使用hash路由，建议选择'是'，如果您选择了否，则启用history模式，那么不要忘记在服务器上做相应的[配置](https://router.vuejs.org/zh/guide/essentials/history-mode.html)
```bash
? Do you want use a hash router? (Y/n)
# 建议您键入 Y 或者直接按下 Return
```
4、是否插入错误搜集SentrySDK相关代码，建议您选择是,阅读[相关文档](https://gitlab.2345.cn/pub/ued/notes/issues/38)
:::warning 
需要注意的是，如果你选择了是，那么你还需要在sentry平台申请创建一个项目并获取到对应的DSN
:::
```bash
? 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进行包管理工具
```bash
yarn 
```
如果你使用npm,则使用
```bash
npm install
```
然后敲入命令即可进行开发
```bash
yarn dev # 或者yarn serve,如果您用npm,则键入npm run dev或者npm run serve
```
![本地开发](../.vuepress/public/img/dev.jpeg)  
启动完成后打开上面的链接 http://localhost:8006，如果能看到下面的页面就代表成功了。
![欢迎首页](../.vuepress/public/img/welcome.png)
接下来你可以修改代码进行业务开发了，我们内建了基础UI界面、Mock数据(可选)、状态管理、权限路由配置等实用功能用于辅助开发，你可以继续阅读和探索官网文档。