/alipay-vue

蚂蚁金服小程序(alipay hybrid) 基于 vuejs 的 template

Primary LanguageJavaScript

alipay vue

蚂蚁金服小程序(alipay hybrid) 基于 vuejs 的 template

运行部分截图

-1

使用方法

yarn install
建议使用 [yarn](https://yarnpkg.com/)
yarn run start # 开发模式
yarn run build # 构建文件

npm run start 会启动一个 http server, 打开网址 http://127.0.0.1:8989/ 进行开发调试,浏览器会自动刷新

Promise

  • 小程序介绍 需要对接阿里内部,登录授权后才能访问
  • npm start 用来开启server,必须为8989端口
  • npm run build 用来构建,构建后文件放在dist目录下
  • 依赖 Webpack2 Vue2
  • 可维护 易扩展 效率高

High Quality Resources

component communication

项目目录结构

src                           // 源文件目录,`npm run dev`阶段会监听此目录下的文件变动
│
├── assets                    // 存放 样式、字体文件和图片等 公共静态资源
│   ├── css/
│   ├── font/
│   ├── images/
│   └── ../                   // 根据实际项目可分配 media、svg等资源目录
│
├── components                // 存放 Component 文件的目录, 可以在组件内部管理自己的html结构、样式和逻辑和静态资源
│   ├── header                // 组件范例
│   │   ├── logo.png
│   │   └── header.vue
│   └── ../                   // 其他组件 search、nav、tab、list、footer
│
├── utils                     // 公共方法 可能会在多个地方调用到的公共方法,按照不同的功能归类成多个js文件,放在util中
│   ├── bridge.js
│   └── ../                   // 网络请求相关(ajax)、浏览器环境检测(detect)、数据统计(track)
│
├── static                    // 第三方公共资源
│   └── ../                   // 栅格系统(grid)、字体图标(icon-fonts)、动画样式(animate)
│
├── pages                     // 多页面,页面切换方式推荐 [pushWindow](https://myapp.alipay.com/cases/hybrid-skill.html#开发技巧)
│   ├── index/
│   │   ├── index.html
│   │   ├── main.js           // 打包工具会遍历mian.js作为入口文件
│   │   ├── logo.png
│   │   └── component.vue     // 总有一些组件是特殊对待的
│   └── ../                   // 首页(index),列表页(list),用户管理(user)
│
│
├── 下面目录根据实际情况酌情添加 ──
├── filters                   // 过滤器
├── directives                // 指令
├── services                  // api服务层
└── vuex                      // [Vuex应用结构](https://github.com/vuejs/vuex/blob/1.0/docs/zh-cn/structure.md)

编码规范

本脚手架使用 standard 编码风格。 默认 2 空格缩进,禁用分号,字符串单引号优先。

  • build 构建线上代码时会禁用 alert 和 debugger,dev 模式下不禁止
  • 如果希望对规则进行更改,可调整 .eslintrc.js。 以允许使用分号为例:
'semi': 2 // 2 为 error,1 为 warning, 0 为不检测, 重启 npm 生效
  • 希望跳过部分文件检测,可配置 .eslintignore, 语法和 .gitignore 一致

技能点

详见 SKILLS.md