# 前言 应对公司越来越多的前端需求开发，统一前端解决方案显的尤为重要 此框架是基于VUE-CLI，结合了公司实际情况后进行搭建 __注：此框架还有很多不足之处，希望大家共同完善起来。__ ## 技术栈 vue2 + vuex + vue + vue-router + webpack2 + ES6/7 + axios + sass + flex ## 关于 数据接口 的说明🤔 ### 2017-12-28 框架中的公共请求方案是基于请求SG做的封装，主要是实现对身份失效时刷新token等操作的处理 ## 项目运行 #### 注意：由于涉及大量的 ES6/7 等新属性，nodejs 必须是 6.0 以上版本 ，建议使用 node 8.10 稳定版 ``` vue init SeanBurt/teld-web-frame (通过vue-cli初始化项目) npm install npm run dev (启动本地开发) npm run build (构建发布生产版本) ``` # 说明 > 搭建环境 window 10 webpack 3.6.0  nodejs 8.10.0 > 通过修改配置节，实现单页或多页的编译切换功能 👍 > 如有问题或者您发现问题并有非常好的解决方案请在钉钉中与我沟通 🌹 # 目标功能 - [x] 单页面应用开发 -- 实现 - [x] 多页面应用开发 -- 实现 # 项目布局 ``` . ├── build // webpack配置文件（开发过程中无需关心） ├── config // 项目打包相关配置 │   └── index.js // 项目打包主要配置方件（针对不同应用场景，配置不同，参考 下方 # 配置说明） ★★★ ├── dist // 上线项目文件，放在服务器即可正常访问（运行 npm run build 时自动生成） ├── src // 源码目录 │   ├── assets // 资源 │   │   ├── css // 样式 │   │   │   └── base.css // 基础样式，重写部分html标签默认样式 ★ │   │   ├── img // 图片 │   │   ├── js // 脚本 │   │   ├── teld // 特来电公共引用 │   │   └── third // 第三方引用 │   ├── components // 组件 │   │   ├── common // 公共组件 │   │   ├── Loading.vue // 页面初始加载load组件 │   │   └── pullRefresh.vue // 上拉加载，下拉刷新组件 │   ├── module // 多面应用文件路径 （针对不同应用场景，配置不同，参考 下方 # 配置说明） │   ├── page // 单面应用文件路径 （针对不同应用场景，配置不同，参考 下方 # 配置说明） │   │   └── demo │   │      └── login.vue // demo │   ├── plugins // 引用的插件 │   ├── router │   │   └── router.js // 单面应用路由配置 │   ├── service // 数据交互统一调配 │   │   ├── config.js // 接口地址的配置文件，对接口进行统一管理 ★★★ │   │   └── index.js // 获取数据的统一调配文件，对请求进行统一管理 │   ├── store // vuex的状态管理 （多页应用不建议使用） │   │   ├── modules // store模块 │   │   │ └──common.js // 公共store模块 │   │   ├── action.js // 配置actions │   │   ├── getters.js // 配置getters │   │   ├── index.js // 引用vuex，创建store │   │   ├── mutation-types.js // 定义常量muations名 │   │   └── mutations.js // 配置mutations │   ├── utils // 工具配置 │   │   ├── env.js // 环境切换配置 │   │   ├── index.js // 公共请求框架 ★★★★★ │   │   ├── method.js // 常用的js方法 │   │   ├── rem.js // px转换rem │   │   └── rsa.js // rsa加密文件 │   ├── App.vue // 单页页面入口文件 │   ├── main.js // 单页程序入口文件，加载各种公共组件 ├── static // 静态文件 │   ├── original // 为区别打包文件，多加一层目录 │   │   ├── css // 样式 │   │   ├── font // 静态样式依赖的字体库 │   │   ├── img // 图片 │   │   └── js // 脚本 │   │   └── teldApp.js // 嵌入app中的H5，html文件必须在中引用此文件 ★★★★★ ├── test // 单元测试 ├── .babelrc // babel配置文件 ├── .editorconfig // 编译器配置文件 （建议用webstorm开发） ├── .eslintignore // eslint配置文件 ├── .eslintrc.js // eslint配置文件 ├── .postcssrc.js // 通过js转换css配置文件 ├── favicon.ico // 图标 ├── index.html // 单页入口html文件 ├── package.json // 框架运行及编译依赖文件配置 ★★★★★ ├── README.md // 框架说明方档 ├── Version.md // 框架更新说明 ``` # 配置说明 ├── config │   └── index.js ## 单页应用配置实例 module.exports = { type: 'SPA', moduleName: '', entry: '', } ## 多页应用配置实例 module.exports = { type: 'Multi', moduleName: 'module', // 需要和src下module文件夹名同步修改 entry: '/**/*', // '/**/*' 为全部编译，可改成具体文件路径 /文件夹名/js(html)文件名称 } ├── src │   ├── module │   └── page ## 单页应用开发--在page目录下开发 ├── src │   ├── page │   │   ├── [**] // 模块目录 │   │   │ ├── *.vue // 具体业务功能实现 │   │   │ └── *.vue // 具体业务功能实现 ## 多页应用开发--在module目录下开发 ├── src │   ├── module │   │   ├── [**] // 模块目录 │   │   │ ├── *.html // 模块功能入口html （需和下方js名字保持一致） │   │   │ ├── *.js // 模块功能入口js （需和上方html名字保持一致） │   │   │ ├── *.vue // 具体业务功能实现 (模块用vue开发时需要，如果只是简单的静态页面不建议使用vue)