Giter VIP home page Giter VIP logo

h5's Introduction

llw-h5

如何运行

  • 安装依赖:npm install
  • 运行开发:npm run serve
  • 打包上线:npm run build
  • 规范检查:npm run lint

使用Vue组件库 —— Vant

  • Vant组件库 文档
  • 使用 CSS 预处理语言 —— Less
  • 注意:项目使用 Rem 适配,参考 Vant 组件库 文档中 【快速上手 -> 进阶用法】章节进行配置

使用插件

  • axios:基于 promise 的 HTTP 库。
  • better-scroll:解决移动端、PC端各种滚动场景需求。
    • BetterScroll 2.x 文档
    • 注:better-scroll使用版本为 2.x 。上拉刷新(pullup)、下拉加载(pulldown)等以插件的形式引入
  • dayjs:轻量的处理时间和日期的 JavaScript 库

编写指南

  • Vant 风格指南
  • router 编写约定
    • 对不同模块的路由进行拆分,分别写入对应模块中
  • Vuex 编写约定
    • Vuex 进行模块化拆分,并设置命名空间 namespaced: true

    • 统一使用 Action 通过 Mutation 来修改 State 的数据

      // moduleA.js
      const state = {
        username: ''
      }
      
      const mutations = {
        SET_USERNAME: (state, username) => {
          state.username = username
        }
      }
      
      const actions = {
        getUsername ({ commit }, username) {
          commit('SET_USERNAME', username)
        }
      }
      
      export default {
        namespaced: true,
        state,
        mutations,
        actions
      }
      
      // 页面(组件)中使用
      import { mapState, mapActions } from 'vuex'
      export default {
        computed: {
          ...mapState({
            username: state => state.moduleA.username // moduleA中的state
          })
        },
        methods: {
          ...mapActions({
            getUsername: 'moduleA/getUsername' // moduleA中的Actions
          })
        }
      }

目录结构

src
 | --- api - api
 | --- components - 公用组件
 | --- router - 路由
 |       | --- modules - 路由模块
 |       | --- index.js - 路由入口文件
 | --- store - vuex状态管理
 |       | --- modules - vuex模块
 |       | --- index.js - vuex入口文件
 | --- utils - 工具集
 |       | --- request.js - 请求封装
 | --- views - 视图
 | --- App.vue
 | --- main.js

h5's People

Contributors

chaifuling avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.