# 快速上手

## 上手之前
基于我们的目标以及一些定制的组件，我们提供了以下的典型模版，并构建了一套基于Vue的中后台项目的脚手架，它可以帮助你快速搭建企业级中后台前端项目。
  
生成后，基础的页面结构如下：
```
- 页面排版
    - 基础表单
    - 卡片列表
    - 查询表格
- 自定义组件
    - 选框类
    - 上传组件
- 登录页面
- 自动授权登录
- 异常页面
    - 403
    - 404
    - 500
```
> 项目生成后可以根据业务需要修改名称或删减页面，事实上，你一定会这么做

## 准备工作
你的本地环境需要安装[Yarn](https://yarn.bootcss.com/)、[Node.js](http://nodejs.cn/) 、 [Git](https://git-scm.com/) 和 [VueCli](https://cli.vuejs.org/zh/)。
我们的技术栈基于 ES6+、[Vue](https://vuex.vuejs.org/)、[Element](https://element.eleme.cn/#/zh-CN)，我们假设你已经掌握了这些技术，并已经在至少一个项目中使用过他们。
::: tip 提示
版本  
1、Node.js推荐使用10.X以上版本，强烈建议您使用12.X的LTS版本，不过主版本号为奇数的11.X则不建议使用。  
2、Vue建议使用2.6+的版本  
3、VueCli推荐使用最新的4.0+版本  
4、对于Element,我们将自动为您引入2.12.0或以上版本
:::

## 安装
#### 初始化
在正式安装之前，您需要使用[VueCli初始化一个项目](https://cli.vuejs.org/zh/guide/creating-a-project.html)，我们建议您使用如下的配置
::: danger 强烈建议
为了确保在您初始化后能够正常运行，我们建议您采用如下配置，这么做的好处如下：  
1、确保生成后的项目具有一致性，降低跨项目维护成本  
2、降低Pro维护成本  
:::
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（选取node-sass以避免element-ui出现乱码，其他情况我们还是建议使用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
```
在安装插件后你需要（上下移动箭头）选择Element-UI的引入方式：  
导入Element的形式,您可以根据需要选择
```bash
？We will import Element-UI for you, choose the type to import it?
> Fully import
  Import on demand
```

做完这些操作后，Octopus-Pro将为您生成项目并安装依赖
我们在内部集成了[Mock](http://template.ued.2345.cn/%E8%A1%A5%E5%85%85%E8%AF%B4%E6%98%8E/%E8%A1%A5%E5%85%85%E8%AF%B4%E6%98%8E.html#%E4%BB%8B%E7%BB%8Dmock%E6%9C%8D%E5%8A%A1)、[Sentry SDK](https://gitlab.2345.cn/pub/ued/notes/issues/38)等代码，您可以点击链接查阅相关文档
## 目录结构
我们已经为你生成了一个完整的开发框架，提供了中后台开发的基础界面和功能，下面是整个项目的目录结构。
```
├── 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数据(可选)、状态管理、权限路由配置等实用功能用于辅助开发，你可以继续阅读和探索左侧的其他文档。