# 蔓延导航

**Repository Path**: iain/vue-manyan-nav

## Basic Information

- **Project Name**: 蔓延导航
- **Description**: 基于vue全家桶（elementUI组件库 + Vue.js 框架 + vuex状态管理 + vue-router 路由）和 Axios ajax Http请求工具 开发
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-11-27
- **Last Updated**: 2022-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 蔓延导航

## 基于vue全家桶开发

### 开发环境

- nodejs 8.9.1

### 包管理器

- npm 5.5.1

### 构建工具

- vue-cli vue 项目脚手架 一键安装 vue 全家桶的工具
- webpack 项目打包以及编译工具

### 技术架构

- vue全家桶（Vue.js 框架 + vuex状态管理 + vue-router 路由）
- elementUI组件库
- sass-loader 和 node-sass css 预处理
- Axios ajax 接口请求工具
- mock 模拟数据 实现前后端分离开发

## 项目运行

``` bash
git clone https://gitee.com/iain/vue-manyan-nav.git

cd vue-manyan-nav

npm install 安装依赖

npm run dev 启动项目 localhost:8080

npm run build 编译生产环境
```

## 目录结构

``` bash
├── build                                       // 编译配置文件
├── config                                      // 基本设置文件夹
│   ├── dev.env.js                              // 开发配置文件
│   ├── index.js                                // 配置主文件
│   └── prod.env.js                             // 编译配置文件
├── dist                                        // 打包好的项目，放在HTTP服务器即可正常访问
├── README                                      // README引用资源
├── screenshots                                 // 项目截图
├── src                                         // 源码目录
│   ├── assets                                  // 静态资源
│   │   └── images                              // 图片
│   ├── components                              // 全局公用组件
│   │   ├── common                              // 公共组件
│   │   ├── footer                              // 底部公共组件
│   │   └── header                              // 头部公共组件
│   │   └── AppDemo.vue                         // 全局demo组件
│   ├── filters                                 // 全局过滤器
│   ├── mock                                    // mock数据
│   │── router                                  // 路由配置文件夹
│   │   └── index.js                            // 路由配置文件
│   ├── store                                   // 全局store管理
│   │── style                                   // 全局 scss 样式存放目录
│   │   ├── mixin.scss                          // 混合宏
│   │   └── common.scss                         // 全局样式
│   ├── utils                                   // 全局公用方法
│   ├── view                                    // 页面组件
│   │   └──  HelloWorld.vue                     // vue官方示例页面
│   ├── App.vue                                 // 页面入口 主组件 所有都在App.vue下进行切换
│   └── main.js                                 // 程序入口 加载组件 初始化vue实例并使用需要的插件
├── static                                      // 纯静态资源文件夹
├── favicon.ico                                 // 图标
├── index.html                                  // 入口html文件
├── package-lock.json                           // npm5 新增文件，优化性能
├── package.json                                // 项目依赖包配置文件
└── README.md                                   // 项目说明文档

```

## 开发注意事项

### vue 生命周期图示

> 下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

<!-- ![vue 生命周期](/README/images/vue-lifecycle.png =200x300) -->

<img src='README/images/vue-lifecycle.png' width='600' height='1520' align='center'/>

### 组件规范

> 详细规范请查看 [Vue.js 组件编码规范](https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese)

### 组件命名规范

- 有意义的: 不过于具体，也不过于抽象
- 简短: 2 到 3 个单词
- 具有可读性: 以便于沟通交流

``` html
<!-- 推荐 -->
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>

<!-- 避免 -->
<btn-group></btn-group> <!-- 虽然简短但是可读性差. 使用 `button-group` 替代 -->
<ui-slider></ui-slider> <!-- ui 前缀太过于宽泛，在这里意义不明确 -->
<slider></slider> <!-- 与自定义元素规范不兼容 -->
```

### 使用组件名作为样式作用域空间

``` html
<style scoped>
  /* 推荐 */
  .MyExample { }
  .MyExample li { }
  .MyExample__item { }

  /* 避免 */
  .My-Example { } /* 没有用组件名或模块名限制作用域, 不符合 BEM 规范 */
</style>
```

### 其它注意事项

组件数据校验，规范的组件写法，提供组件的API文档和demo。