/vue-app

☘️ 基于 Vue CLI 3 快速生成 Vue 项目的初步封装,组装或必要的零件。开箱即用。

Primary LanguageJavaScriptMIT LicenseMIT

vue-app

基于 Vue CLI 3 快速生成 Vue 项目的初步封装,组装或必要的零件。开箱即用。

Vue CLI 3 加入的配置

  • Vue Router

  • ESLint 代码风格 Standard

追加的依赖清单

npm install amfe-flexible axios mint-ui qs vue vue-axios vue-router vuex -S
npm install babel-plugin-component node-sass sass-loader -D

组装

  • UI 框架使用 mint-ui 并通过 babel-plugin-component 插件按需引用,不必全局引用

  • HTTP 库选择 axios

    • 设定默认配置,包括但不限于 baseURL、timeout

    • 添加全局拦截器且 Indicator 与 Toast 包含其中

    • 通过 vue-axio 注入到 Vue 实例中

    • 导出多个不同服务的 request 请求

  • 可根据需要自行删减 Vuex

    • 规范了中大型项目使用 Vuex 时的目录层次,全局与局部解耦

    • 使用 async / await,使异步流程更加优雅

    • 开发环境添加了热重载

  • 集成 css 预处理器 sass 与使用 amfe-flexible 实现可伸缩布局方案

    • 添加 reset

    • mixin

      • 加载背景图 2 倍 与 3 倍像素

      • 移动端 0.5px 边框实现

    • base

      • 基于逻辑分辨率宽度 370 设计图的 s10 ~ s20 (10px ~ 20px) 单位实现

      • 初始化其他 html 标签

      • 添加通用 class

  • 路由使用异步加载 component: resolve => require(['@/views/Home'], resolve)

  • 目录规范化

    • assets 静态资源

      • css 全局 css

      • img views 目录下各路由的业务图片资源

      • sass 全局 sass

    • components 组件库目录

      • component1

        • component1.vue

        • component1-1@2x.png

    • router 路由

    • services request 配置及请求导出

      • axios request 请求配置

      • index 业务请求方法的导出

      • user 全局用户模块从 index 中的抽离

    • store 状态管理

      • index 组装模块并导出 store

      • actions 根级别的 action

      • mutations 根级别的 mutation

      • moudules 模块化

    • utils

      • constant 全局常量的导出

      • util.js 工具函数

      • filters.js 过滤器函数且已全局扩展至 Vue

    • views 路由目录,相应静态资源分类至 assets

      • Home Home 页面目录

        • Home.vue Home 组件

        • Banner.vue Home 组件的私有子组件

Build Setup

# install dependencies
npm install

or

yarn install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

License

The MIT License.