基于apollo,graphQL,mdui,vue-router,webpack和express等等的吳語小詞典。
- 集成了mdui,更贴近app原生设计,更多主题选择
- 因为集成了vue-apollo,更方便对接graphQL。
需要先运行 apollo-server.
# install dependencies
# Good network environment
# install dependencies by cnpm or npm
cnpm i
# Bad network environment
# global install yarn
cnpm i yarn -g
# install dependencies by yarn
yarn install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# view after build effect at localhost:8089
npm run dist
├── build // 生产环境webpack配置文件和运行文件
│ │ ├── ... // webpack配置文件
│ │ ├── prod.dev.js // 生产环境运行文件
├── config // 基本配置
│ │ ├── dev.env.js // 开发环境配置文件
│ │ ├── index.js // 总配置文件
│ │ ├── prod.env.js // 生产环境配置文件
│ │ ├── test.env.js // 测试环境配置文件
├── dist // 上线项目文件,放在服务器即可正常访问
├── screenshots // 项目截图
│ ├── login.png // 应用栏仅在顶部蓝色主题显示效果
│ ├── register.png // 应用栏仅在顶部紫色主题显示效果
│ ├── HeaderBottomToolbarFooterLayout // 应用栏仅在顶部
│ │ ├── HeaderBottomToolbarFooterLayout-blue.png // 蓝色主题显示效果
│ │ ├── HeaderBottomToolbarFooterLayout-indigo.png // 紫色主题显示效果
│ │ ├── HeaderBottomToolbarFooterLayout-grey.png // 灰色主题显示效果
│ │ ├── HeaderBottomToolbarFooterLayout-blue-grey.png // 蓝灰色主题显示效果
│ ├── HeaderTopToolbarFooterLayout // 应用栏仅在底部
│ │ ├── HeaderTopToolbarFooterLayout-blue.png // 蓝色主题显示效果
│ │ ├── HeaderTopToolbarFooterLayout-indigo.png // 紫色主题显示效果
│ │ ├── HeaderTopToolbarFooterLayout-grey.png // 灰色主题显示效果
│ │ ├── HeaderTopToolbarFooterLayout-blue-grey.png // 蓝灰色主题显示效果
├── src // 源码目录
│ ├── asset // 项目相关设计资源
│ │ ├── css // 项目相关样式设计文件
│ │ │ ├── app.scss // 项目主要的样式文件,整合了其他样式文件板块,最后在app.vue进行引入
│ │ │ ├── framework.scss // 项目主要的框架样式文件
│ │ │ ├── reset.scss // 项目自定义的重置样式文件
│ │ │ ├── theme.scss // 项目主要的主题样式文件
│ │ │ ├── tool.scss // 项目主要的通用帮助样式文件
│ │ ├── js // 项目相关样式设计文件
│ │ │ ├── router
│ │ │ │ └── index.js // 路由配置
│ │ │ ├── vuex // vuex的状态管理
│ │ │ │ ├── store.js // 引用vuex,创建store
│ ├── components // 组件
│ │ ├── Footer.vue // 底部公共组件
│ │ ├── Header.vue // 头部公共组件
│ │ ├── toolBar.vue // 应用栏组件
│ ├── layouts
│ │ ├── HeaderBottomToolbarFooterLayout // 头部应用栏仅在底部底部响应布局
│ │ │ ├── Layout.vue // 响应布局组件
│ │ ├── HeaderTopToolbarFooterLayout // 头部应用栏仅在顶部响应布局
│ │ │ ├── Layout.vue // 响应布局组件
│ ├── pages
│ │ ├── Login.vue // 登录页
│ │ ├── Dictionary.vue // 有查页面
│ │ ├── Voice.vue // 有音页面
│ │ ├── Rule.vue // 有则页面
│ │ ├── Address.vue // 有地页面
│ ├── service // 数据交互统一调配
│ │ ├── loStorage.js // localstorage 统一处理文件
│ │ ├── getData.js // 获取数据的统一调配文件,对接口进行统一管理
│ │ ├── moAjax.js // 对于axios进行语法封装
│ │ ├── vueApollo.js // vue-apollo处理文件
│ ├── App.vue // 页面入口文件
│ ├── main.js // 程序入口文件,加载各种公共组件
├── static // 源码目录
│ ├── img // 引用的静态图片
│ ├── plugins // 引用的插件
│ │ ├── css // 引用第三方的样式文件
│ │ ├── font // 引用第三方的字体文件
│ ├── mock // 数据模拟
│ │ ├── ToolBar.json // 项目中左侧面板的数据文件
├── index.html // 入口html文件
.