# vue-demo

**Repository Path**: plusdo/vue-demo

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-04-10
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VUE全家桶
GIT地址：https://gitee.com/plusdo/vue-demo

## Vue
 - 前后端分离
 - 使用Vue的好处
 - 数据
## 架构


## 技术栈
- ES2015
- Promise
- Vue 2.0
  - https://cn.vuejs.org/index.html
- vue-router：处理路由
  - https://router.vuejs.org/zh-cn/
- vuex：处理单项数据绑定
  - https://vuex.vuejs.org/zh-cn/
- axios：处理向后端的http资源请求
  - https://github.com/axios/axios
  - https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/
- element-ui：基于vue2.0 的组件库，饿了么的这套组件库还挺好用的，功能也全
  - https://element.eleme.io/#/zh-CN
- mint-ui：移动端UI
  - https://mint-ui.github.io/#!/zh-cn
- sass：专业级CSS扩展语言
  - https://www.sass.hk/
- Flex: Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
  - 教程1：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
  - 教程2：http://blog.csdn.net/qq_23191031/article/details/53084017
- jwt后台验证，通过vue-router和axios统一处理认证问题
- 图标库
  - http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

## 其他组件
 - [better-scroll](https://github.com/ustbhuangyi/better-scroll)：处理页面滚动操作。
 - [moment.js](http://momentjs.cn/)：处理时间。
 - [vue-core-image-upload](https://github.com/Vanthink-UED/vue-core-image-upload)：处理附件上传。
 - [vuex-persistedstate](https://www.npmjs.com/package/vuex-persistedstate)：vuex插件，处理页面刷新时store中的内容丢失的问题，将store存储在localstorage中

## 调试工具
 - Chrome
 - Vue.js devtools: Chrome插件，查看vuex状态
 - console

## 参考项目
可以参考代码进行练习：
 - https://github.com/bxm0927/vue-meituan
 - https://github.com/hzzly/xyy-vue

## 开发工具
统一使用vsCode进行开发，安装`EditorConfig for VS Code`插件处理缩进等问题。

## 接口工具
接口工具统一使用 [RAP](http://rapapi.org/platform/home.do)，提供接口功能和[mock](http://mockjs.com/)服务。

后台登录地址：http://server-ip/serverName/rest/login(post)，请求 传入参数格式`{"username":"admin", "password":"000000"}`，登录成功后将返回的token写入localstorage中

其他请求需要将token写入http的header中的Authorization(自定义)字段,有`src/api/api.js`统一完成。

## 安装及运行

``` bash
# vue-cli
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project

# 安装node-sass
npm install node-sass

# 安装依赖
npm install

# serve with hot reload at localhost:8080
# 调试运行，默认启动8080端口
npm run dev

# build for production with minification
# 编译打包
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# 修复npm安装时报VCBuild不存在的错误, 使用npm安装windows build tools
npm install --global --production windows-build-tools
```

## 开发常见问题
 - 路径带#的问题
 - vue-router 拦截的问题
 - axios 拦截的问题
 - axios 跨域访问问题
 - 变量处理的问题
 - 图片加载的问题 require
 - props computed watch
 - 自定义组件传值问题
 - 打包时包过大的问题
 - 样式 scope

## 目录结构
```
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- api                          // 统一处理资源请求
|   |   |-- http.js                  // 处理api服务路径及token拦截功能
|   |   |-- api.js                   // 处理业务api服务路径
|   |-- assets                       // 资源目录，图片/javascript/css
|   |-- components                   // vue公共组件
|   |   |-- base                     // 页面基本布局组件
|   |-- config                       // 项目参数配置
|   |-- pages                        // 项目页面，所有项目的页面均放本目录
|   |   |-- logistics                // 物流页面
|   |   |-- error                    // 错误页面
|   |   |-- login                    // 登录页面
|   |   |-- member                   // 会员管理页面
|   |   |-- sale                     // 销售页面
|   |-- router                       // 路由配置文件，所有请求跳转配置
|   |-- store                        // vuex的状态管理，单向数据绑定，所有数据状态都存在此处
|   |   |-- modules                  // 业务模块状态管理
|   |   |-- actions.js               // 公共action
|   |   |-- getters.js               // 公共getter
|   |   |-- index.js                 // vuex统一管理页面，引用 mutations、actions、getters等
|   |   |-- mutation-types.js        // mutation类型
|   |   |-- mutations.js             // 公共mutatios
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico                      // 图标
|-- index.html                       // 首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。
|-- package.json                     // 项目基本信息
```