使用vue-cli开发（本地需要安装node.js）

# 安装
npm install

# 开发环境服务器默认 localhost:8080
npm run serve

# 部署生产环境
npm run lint

# 运行单元测试
npm run test:unit

# 部署生产环境
npm run build

项目技术架构

---

• vue-cli
• webpack
• vue
• Vue-axios
• vue-router
• Vux-UI

目录结构

---

<pre>
├── build // 构建服务和webpack配置
├── config // 项目不同环境的配置
├── dist // 项目build目录
├── index.html // 项目入口文件
├── package.json // 项目配置文件
├── src // 生产目录
│ ├──api // 请求链接
│ ├── utils // 网络请求配置，拦截配置
│ ├── assets // 图片资源
│ ├── common // 公共的css js 资源
│ ├── components // 各种组件
│ ├── App.vue // 主页面
│ └── main.js // Webpack 预编译入口
</pre>

性能优化处理

---

• vue-router 路由懒加载
• Vue 组件懒加载
• Vux-UI 只引入项目中需要的组件
• Vue-axios 所有url请求和返回的数据data都写在

---

VueUI框架选择

Vue Router 单页面应用：控制组件跳转

Vue-axios网络请求

vue-devtools调试工具

Vux-UI 移动web组件库，选择原因：有演示demo，用法简单，可配置性强，官方文档清晰明了

下拉刷新UI可以配置拖拽和自动刷新，只需要导入组件即可

滚动better-scroll

侧滑

---

其他插件框架

vuex管理复杂的数据流向，状态机工具

vuex-persistedstate将vuex中state持久化的工具

vue-lazyload实现图片的懒加载，优化http传输性能，选择原因：轻量级插件，有demo参考，copy组件即可

城市/收货地址级联选择器有城市和收货地址的级联下拉选择器，同一页面可以多次使用

PC常用组件库有城市和收货地址的级联下拉选择器，还有分页等

城市联选择器V - Distpickerde城市级联下拉选择器，同一页面不可以多次使用

Vue-DPlayer播放器使用视频/直播/弹幕的播放器

wangEditor富文本编辑器 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

跨域

跨域：请求的发起方和接收方ip不同或者端口不同，就是跨域，浏览器为了安全性一般不允许发起跨域请求，跨域问题只存在客户端对服务器，服务端对服务端不存在

• 解决方案
  1、后端通过过滤器放行options请求，设置Access-Control-Allow-Origin头部 解决跨域
  2、设置nginx做代理（生产环境），承受并发的能力高，所以一般使用nginx解决跨域问题
  3、使用node.js解决跨域问题，（vue中使用webpack解决）适用于开发环境，这种解决方式承受并发的能力是远远不如nginx的，所以一般使用nginx解决跨域问题

开发工具使用

webStorm

代码规范

• 引入组件及文件

  
  image.png
  

  应用：

// 写法一
    import api from '../api'
// 写法二 可以使用@，@表示对src文件下所有组件进行引入
    import api from '@/api'