• Stars
    star
    119
  • Rank 297,930 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 7 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

vue-boilerplate help you build a simple, easy-to-use front-end business framework

vbp 帮你自动搭建一个简单易用的前端业务框架。

初始化项目的时候除了soket暂时不需要,其他建议都选择y

cd mypro                          将命令行路径转到项目内 也可以关了到项目内再打开
npm install                       此命令将安装项目packa.json中记录的node_modules依赖包

npm run dev                       开发环境热加载项目  会自动打开网页,并在修改代码保存之后,更新网页
npm run build                     上线环境打包命令,会生成dist文件夹,内部包含src目录下所有的文件
                                  注意建议放在服务器根目录不然的话需要修改配置才能正常(原因为,打包默认为绝对路径)访问
文件/文件夹介绍
index.html                        项目html文件,只有这一个html
build、config、test               webpack配置以及测试文件夹(一般不需要关心,需要修改webpack配置可以重点关注一下)
static                            不需要打包编译的静态文件(npm run build之后会直接放到dist/static里面)
src                               源码文件夹
    main.js                       项目入口,所有文件都是从这里开始
    app.vue                       app入口,默认有一个<router-view/>作为路由的容器
    assets                        静态资源文件夹(可以存放图片、静态css,js,视频等等),会通过webpack进行打包
                                  所以使用这里面的文件的时候请使用 import或者require的方式进行引入
    components                    公共组件文件夹,项目用到的公共模块的存放地方(比如下拉框、table等等)如果引用第三方库,根据需要自行放置
    config                        项目配置文件夹,包括api,route,多语言的配置
          api                     项目api的配置文件夹
              api.conf.js         项目的后台接口配置文件。
              api.store,js        项目api的集中的地方,如果新增了自己的与后台交互的模块,需要在这里引入
              baseapi.js          对官方的axios进行二次封装的地方
          env                     后台服务器地址配置
              env.conf,json       后台地址记录json
              env.export.js       后台地址分发的js
           i18n                   多语言配置(大多项目暂时不需要配置多语言)
           routes                 项目路由配置
               index.js           路由配置初始化的地方,
                                  其中 mode: 'history' ,是前台的路由模式,history会去掉浏览器url中的#,这个需要服务器将404重定向到index.html中
                                  scrollBehavior是路由变化是的统一行为(目前是自动回到页面顶部)
               routes.store.js   将其他路由统一引入的文件
           directives             vue自定义指令文件夹
           fetch                  具体的逻辑处理文件夹,比如与后台交互需要进行数据处理等等
           filters                vue自定义过滤器文件夹
           languages              多语言具体文件存放
           mixins                 混入文件夹(不用管)
           pages                  具体页面文件夹(建议是每一个页面自己相应的配置z-routers.js,如果配置了,需要引入到routes.store.js中)
           store                  vuex(项目状态存放文件夹),通常用来存放项目中公共的状态,比如用户名,等等,其他的也可以分别加入
                                  需要注意的是,store的获取可以使用getter 和state      但是修改只能使用mutation,否则vue不会动态监听

QQ讨论群:255965810

如何使用

$ npm install -g vue-cli
$ vue init halower/vbp  my-project
$ cd my-project
$ npm install
$ npm run dev

项目说明

组件相关文件夹说明 (components)

该文件夹建议只写组件

怎么判断是组件?

是不是可以复用,原则上可以复用的需要抽离成组件,不能复用无需组件化.

配置相关文件夹说明 (config)

api.conf.js

  • 功能:

集中管理各个业务模块的后端请求地址,便于排错和集中管理

  • 用法:

每个模块都导出一个本模块的地址对象即可

 export const demo(模块名称) = {
   test: '/api/test' //只需要写相对路径路径
 }

service.conf.js

  • 功能: 按照项目的需求初始化一些服务的配置参数,例如请求http://127.0.0.1/api/test,则根路径(baseUrl)为http://127.0.0.1,这样在api.conf.js只需要写相对路径,其中baseUrl为必须参数

api.store.js

  • 功能:

  作为所有业务请求的入口,将所有的http相关的处理从页面组件中剥离,在服务模块中集中处理完复杂逻辑等操作,减少页面臃肿程度.

  • 页面调用方法:(我们将所有的服务模块全部包装到this.$api中,以便识别服务)
 this.$api.user.adduser({name:'halower'}) 
  • 依赖文件:

api.conf.jsfetch(文件夹)

baseapi.js

  • 功能:

作为所有服务对象的基类,包含了请求地址代理,统一的请求入口(get,post ect.)

routes.store.js

  • 功能:

集中的路由管理中心,将各个业务模块中的路由统一整理合并

  • 用法:
  1. 导入每个业务模块的路由单元
import demo from '@/pages/demo/z-routes
  1. 添加业务路由
routes = routes.concat(demo)

指令相关文件夹说明 (directives)

功能 全局指令处理,只需要在此处使用Vue.directive即可扩展项目的指令集

业务服务相关文件夹说明 (fetch)

  • 功能

将繁琐的数据处理和关联性的逻辑操作从页面中剥离,降低服务与页面的耦合

  • 用法
  1. 引入服务基类并继承它
  2. 方法中的url路径需要使用到/config/api.conf.js 的模块,由于已经使用代理处理过,因此只需要使用this.业务模块名.请求地址的模式即可以获取真实请求路径
import BaseApiController from '@/config/baseapi'

/**
 * @class 演示业务功能
 */
class DemoApiController extends BaseApiController {
    /*
    * @method 这里我们只做演示
    */
    test () {
       // 假设这里有很复杂的前端逻辑
      return this.get([this.demo.test], {}).then(res => {
       return res.data
     })
    } 
 }
export default new DemoApiController()
  • 依赖文件:

api.conf.js

业务页面相关文件夹 (pages)

  • 功能

编写各个业务模块的页面,每个页面都可以独立配置自己的自己独立的业务路由

  • 约定
  1. 建议路由按照业务模块层级命名,可以有效地避免非规则的命名给我们造成的路由冲突的困扰
  2. 每个业务模块下都使用z-routes.js命名路由的配置文件,这样做仅仅是统一的将路由文件至于 该文件夹的最底下,当然你可以不这么做。
  • 用法

在配置完路由后,请按照config中的说明文档,将路由导入 routestore.js

多语言相关文件夹 (languages)

建议按照不同的业务需要添加分组翻译,便于整理,添加不同的语言类型后在 config/i18n.js引入相应的语言包

状态相关管理文件夹 (store)

  • 功能

统一管理项目状态,在复杂的交互项目中可以启用该模块,可以减少事件的不便性

  • 使用方法
  1. mutation-types.js 在这里进行mutation命名的统一管理
 export const CHANGE_NAME = 'CHANGE_NAME' // 测试更改模块名称

在各个模块中可以使用如下方式引用,使用 [types.CHANGE_NAME] 方式获取

import * as types from '@/store/mutation-types' 
  1. modules文件夹中编写对应的模块,可以引用fetch文件夹中的服务在actions中处理业务
  2. 写完模块状态管理后,在index.js中引入相应模块
 modules: {
    test
  }
  1. 页面使用
<template>
 <div>
    <h2>当前模块:demo2</h2>
    <h1></h1>
    <button @click="changeName('测试')">改变模块名称</button>
 </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapGetters } = createNamespacedHelpers("test");

export default {
  name: "helloworld",
  computed: {
    ...mapState(['name']),
    ...mapGetters(['greet'])
  },
  methods: {
    ...mapActions(['changeName'])
  }
};
</script>

  1. 说明
  • 模块中需要使用 namespaced: true 标记
  • 根节点状态可以直接在 index.js 编写
  • 能不用this.$store 最好不要使用,保持页面整洁
  1. eventbus.js 主要用于简单的非父子组件交互通信使用

使用方法

this.$eventbus.on(event: string | Array<string>, fn: Function)
this.$eventbus.emit(event: string, data: Object)

目前正在使用的企业