vue 项目总结一组件开发的配置和例子

时间 2019-12-04

标签 vue 项目总结组件开发配置例子繁體版

原文原文链接

上一篇文章 https://segmentfault.com/a/11... 介绍了项目里文件夹的分类和做用，此次主要说明 src 文件夹里具体的文件分类和内容。css

先上 src 文件夹的结构图：html

文件及文件夹做用

App.vue

App.vue: 根组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，造成单页面应用

根组件里面是这样子的：vue

其中，<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。渲染的组件还能够内嵌本身的，根据嵌套路径，渲染嵌套组件。这样，就实现了单页面下，根据不一样路由，渲染不一样组件的目的。html5

基本上根组件没什么交互要作，底部的样式其实也能够放在全局的样式表里。ios

main.js

main.js: 入口 js 文件，影响全局，做用是引入全局使用的库、公共的样式和方法、设置路由等。

这个是负责配置影响全局的内容的文件，具体会有如下几种做用：vue-router

一、引入vue 以及相关的库vuex

import Vue from 'vue'  //引入 vue

import store from './store'  //引入 vuex

import router from './router';  //引入路由配置文件

import App from './App'  //引入根组件

二、引入须要用到的第三方库（注意注册使用方式的区别）vue-cli

// 引入element-ui

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-default/index.css';

Vue.use(ElementUI);

// 引入字体图标样式，这里使用了阿里妈妈的 iconfont 字体库

import '@assets/iconfont/iconfont.css';

import '@assets/iconfont/iconfont.js';

// 引入copy 信息组件

import VueClipboards from 'vue-clipboards';

Vue.use(VueClipboards);

// 引入 axios 库

import axios from 'axios'

// 引入 d3 图形库

import * as d3 from 'd3'

// 引入国际化的库

import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

//引入自定义的 json 格式中英文对照文件

import zh from '@assets/lang/zh-CN'

import en from '@assets/lang/en-US'

Vue.config.lang = 'zh-cn'  //设置默认中文

Vue.locale('zh-cn', zh)

Vue.locale('en', en)

// 引入时间转换模块

import moment from 'moment';

moment.locale('zh-cn');

Vue.prototype.$moment = moment;  //将 moment 模块转换成 Vue 的原型方法，在组件里能够直接使用 this.$moment(time)

// 引入图表

import ECharts from 'vue-echarts';

Vue.component('chart', ECharts);  //注册 Echarts 成为全局组件，在组件里能够直接调用 <chart></chart>

三、引入自定义的库element-ui

// 引入银行卡图标样式

import '@assets/icon-bank/iconfont.js';  // iconfont 上收集的银行卡图标

// 引入自定义的http模块

import { AjaxApi } from '@http/AjaxApi.js';  //http 文件夹里自定义的处理 api 接口的文件，导出一个包含全部与后台接口交流的函数的对象

Vue.prototype.$axios = AjaxApi;  //加入 Vue 原型方法，组件里经过 this.$axios.xxx() 调用

// 引入公共方法

import commonMixins from '@mixins/common-mixins.js';  //mixins 文件夹里自定义的通用函数的集合

Vue.mixin(commonMixins);  //全局注册混合

四、引入自定义的公共样式，使得组件内能够用scoped定义自身的样式json

// 引入公共样式以及修改过的 element 样式

import '@assets/css/common.less'

import '@assets/css/theme.less'

五、定义一些简短的不须要单独引入的全局修改

// 在html5 history 模式下，在form表单的组件(input输入框等)里点击enter，会自动将表单数据以get的方式发送到后台，须要阻止默认事件

document.onkeydown = function(e) {

    var e = e || event;

    if(e.keyCode == 13) {

        e.preventDefault ? e.preventDefault() : (e.returnValue = false);

    }

}；

// 格式化金额，每三位加逗号，可选保留几位小数

Number.prototype.format = function(n, x) {

    var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';

    return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');

};

六、设置vue的全局配置，在启动应用前应用

Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示

七、指定渲染的文件

new Vue({

    el: '#app',

    template: '<App/>' ,

    router,

    store,

    components: { App }

})

assets 文件夹

assets: 放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件以及其余资源类文件。

结构以下：

css 文件夹里会有重置 css 样式的文件以及其余全局样式文件。

js 文件夹里放置了包含银行字典和全国省市的字典文件，在组件里引用以后遍历获取数据。

components 文件夹

components: 放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们做为通用组件，避免重复工做；

结构以下：

能够根据功能模块创建文件夹，放置本功能会用到的通用组件。例如 login 文件夹里能够放置注册、登陆、重置密码这几个功能会用的共同模块文件（帐号、密码、图形验证码、短信验证码）； account-center 文件夹放置修改帐号相关的模块。

全局通用的公共模块能够不须要创建文件夹。

http 文件夹

http: 放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件；

结构以下：

config.js 是根据项目需求配置的 axios 实例文件，经过 axios.create([config]) 建立，能够配置诸如指定成功的状态码、序列化 params、设置 headers 、修改 token 、设置全局请求/响应拦截器、设置 baseURL 等。

AjaxApi.js 是经过导入 config.js 实例，传入 API 和其余参数，给每一个 API 配置一个专属函数，再集合导出成对象的文件。例子以下：

mixins 文件夹

mixins: 放置混合选项的文件。具体来讲，至关因而公用函数的集合，在组件中引用时，能够做用于组件而没必要书写重复的方法

我的认为，至关因而没有 <template/> 和 <style/> 的组件，例子以下：

pages 文件夹

pages: 放置主要页面的组件。例如登陆页、用户信息页等。一般是这里的组件自己写入一些结构，再引入通用模块组件，造成完整的页面

这里面就是会被插入根组件的 <router-view/> 节点里的文件，根据路由变化，根组件渲染不一样的文件。

都是单文件组件，没有特殊的结构，就不放图了。

router 文件夹

router: 放置路由设置文件，指定路由对应的组件，设置路由钩子

例子以下：

import Vue from 'vue';

import Router from 'vue-router';

import Tab from '@pages/tab';

import { MessageBox } from 'element-ui';

Vue.use(Router);

const router = new Router({  //新建路由

routes: [

    {

        path: '/',

        redirect: '/signin'  //重定向路由

    },

    {

        path: '/signin',

        name: 'signIn',  //命名路由

        component: (resolve) => {  //按需加载

            require(['@pages/sign-in'], resolve);

          }

      },

    {

        path: '/signup',

        name: 'signUp',

        component: (resolve) => {

            require(['@pages/sign-up'], resolve);

            }

        },

        {

            path: '/tab',

            component: Tab,

            children: [  //嵌套路由

                {

                    path: 'index',

                    name: 'index',

                    component: (resolve) => {

                    require(['@pages/index'], resolve);

                    }

                }

            ]

        }

    ]

});

router.beforeEach((to, from, next) => {  //检测 token ，跳转登陆页

if (checkPathRequiredAuth(to.path) && !sessionStorage.token) {

    sessionStorage.clear();

    MessageBox({

        title: '跳转提示',

        message: '用户认证已过时或不存在，确认后跳转到登陆页',

        confirmButtonText: '肯定',

        type: 'warning',

        callback: action => {

            next({

                path: '/signin'

            });

        }

    });

} else {

    next();

}

});

export default router;

store 文件夹

store: 放置 vuex 须要的状态关联文件，设置公共的 state、mutations 等

一、若是项目结构不是很复杂，可能是父子组件的通讯，可使用 props 传递数据，$emit 和 on 事件通讯，store 文件夹里就只需建立 js 文件。

结构以下：

二、反之，主要使用 vuex 来传递数据和通讯的话，须要按照模块来划分 modules 。store 文件夹里除了有index.js 和全局相关的 js 文件外，还有 modules 文件夹，在 modules 文件夹里根据模块建立对应的 js 文件，导出，最后在 store 文件夹下一级的 index.js 里导入。

store 结构以下：

modules 结构以下：

sign-in.js:

index.js:

要注意的是，使用 modules 分割模块后，组件里获取 state 时要指明对应的 modules。

computed: {
  ...mapState({
    data: state => state.signIn.data,  //sign-in.js 里的 state
    user: state => state.user    //index.js 里的 state
  })
}