# mathless-front

**Repository Path**: mathless/mathless-front

## Basic Information

- **Project Name**: mathless-front
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2020-12-29
- **Last Updated**: 2021-02-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mathless-front

## 安装

Vue 脚手架工具：
```
npm install @vue/cli -g
```

核心依赖：

* Vue: `vue ^2.6.11`
* 状态管理 `vuex ^3.4.0`
* Javascript `core-js ^3.6.5`
* UI: `element-ui ^3.6.5`
* Style处理器 `less ^4.0.0`
* 网络通信 `axios ^0.21.1`
* 提交信息管理 `commitizen`
* 语法检查与规范 `babel-eslint`

详情见 `package.json`

```bash
## 开发 ##
# 安装依赖
$ npm install
# 本地运行
$ npm run serve

## 生产 ##
# 生产编译
$ npm run build
# 安装运行工具
$ npm install -g serve
$ serve dist
```

## 目录结构说明

```
├── README.md
├── babel.config.js            # babel-eslint 配置，格式化代码
├── data.json                  # 本地数据测试文件
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets                 
│   │   ├── math.jpg
│   ├── components             # 放组件
│   ├── config                 # 组件、全局变量配置
│   │   ├── auth.js
│   │   ├── axios.js
│   │   └── env.js
│   ├── main.js                # Vue 组件引入等配置
│   ├── pages                  # 向外展示的界面
│   │   ├── home.vue
│   │   └── login.vue          # 登录界面
│   ├── router                 # 路由配置
│   │   └── index.js
│   ├── store                  # 存储配置
│   │   └── index.js
│   └── style                  # less 样式文件
│       ├── common.less
│       └── mixin.less
└── vue.config.js
```


## 开发说明

### 环境配置

VScode(plugins)：
  eslint, beautify

增加配置文件：

```json
{
  "beautify.language": {
      "js": {
          "type": [
              "javascript",
              "json"
          ],
          "filename": [
              ".jshintrc",
              ".jsbeautify"
          ]
      },
      "css": [
          "css",
          "scss"
      ],
      "html": [
          "htm",
          "html",
          "vue"
      ]
  },
  "editor.tabSize": 2,
  "html.format.indentInnerHtml": true,
  "[html]": {
      "editor.defaultFormatter": "HookyQR.beautify"
  },
}
```

### 新建页面

如果要添加 `example` 这个页面

首先新建 `pages/example.vue`

然后在 `router/index.js` 中更改路由

### 使用组件

首先添加 `import codeplace from '@/components/codeplace'`

然后在 `export` 中写明

```
.../
  components: {
    codeplace
  }
```

### 提交

正常使用 `git add`

在 `git commit` 时，更改为使用 `git cz`