用vue+webpack搭建的前端项目构造

2019年8月31日 221次阅读 来源: 对角另一面

上个项目第一次用到vue+webpack，也是我第一次尝试自动化、模块化的开辟方式，总的来说就是构造太烂，开辟体验差，效力低，难保护。细数的罪行有以下几条

  • 没有servies层，悉数ajax接口都和逻辑夹杂在一同写

  • 只要民众组件和页面，页面没有组件化，形成每一个页面的.vue文件相称长

  • 没有将路由按模块分别，一切路由都写在一个文件中，多人协作代码常常被掩盖

  • 一切的静态资本都放在一同，没有按模块区分，静态资本治理很不轻易

针对上面的题目，此次做项目的时刻，从新对项目构造进行了调解，调解后的项目构造以下：

《用vue+webpack搭建的前端项目构造》
《用vue+webpack搭建的前端项目构造》

上面的截图中，build是编译后的文件，node_modules是依靠包，webpack.config.js是webpack的设置，index.html是进口模板，这些不是本文关注的重点，本文主如果议论src内里的构造。

民众静态材料目次asserts

assets的构造以下：

├── assets
    ├── css  # 款式
    ├── fonts  # 字体    
    └── images # 图片

重要用来安排款式、字体文件和图片等大众静态资本。实在上一个项目中也有这个目次，然则将全部项目的静态资本都往内里放了，保护起来不轻易。这个项目中，asserts只寄存大众的静态资本。

第三方插件目次static

在项目中，常常会用到一些没有npm包的第三方插件。比方此次我们是做挪动端的产物，用了淘宝自适应计划，我们会将flexible.js等一切插件都放在static中治理。

大众要领util

能够会在多个处所挪用到的大众要领，依据差别的功用归类成多个js文件，放在util中

指令directives

directives文件夹中包括modules文件夹，和一个一致的进口index.js，modules里是差别指令的详细逻辑，index是一切指令的进口，轻易在app.js中注册。index.js的代码以下：

import directive1 from '.modules/directive1';
import directive2 from '.modules/directive2';
export default {
    ...directive1,
    ...directive2
}

状况治理vuex

vuex运用的是官方引荐的项目构造,modules内里是各模块的js文件。

大众组件components

components里安排的是大众组件，每一个组件有本身自力的文件夹，内里包括.vue文件和组件的images等静态资本文件夹。如许的优点是，能够在组件内部治理本身的html构造、款式和逻辑和静态资本。
components的构造以下：

├── components
    ├── com1  # 组件1
        ├── images   # 静态资本：图片    
        └── com1.vue # template/style/script
    ├── com2  # 组件1
        ├── images   # 静态资本：图片    
        └── com2.vue # template/style/script

路由routes

路由中包括map文件夹和进口文件index.js，map文件夹中依据模块来分别，每一个模块零丁一个路由设置文件，再在index.js中汇总，app.js中引入进口文件index.js就能够完成路由的注册。index.js中的代码也许以下：

// 加载差别的模块
import order from './order'; // 定单
import log from './log';// 上岸
export default {
    ...order,
    ...log,
};

效劳层services

在上一个项目中，没有路由层这个观点，都是在和页面的要领中直接挪用后端供应的api，这个api很疏散，不轻易治理，厥后看到vue-demo对services的分别，以为很好，就搬了过来。

services内里有个lib的文件夹，内里寄存的是种种ajax类库，如jquery的ajax、vueResource等，而且对种品种库进行了一致接口的封装和错误处理，暴露给表面的是一致的ajax接口，如许很轻易差别项目，差别类库之间的切换。services下面依据模块，将一切API封装成要领，返回的是promise对象，在要用的处所直接挪用要领就能够了。

页面views

views按模块分别，模块下面有页面，页面内里有静态资本和组件。上一个项目中，页面没有拆分组件，页面和组件的静态资本也都放到了asserts文件夹中。此次都放到了本身的对应文件夹下，治理起来轻易了许多。构造以下:

├── views
    ├──  module1  # 模块1
    │     ├── page1   # 页面   
    │          ├── components   # 页面 
               │   ├── com1
               │       ├── images // 组件1的静态资本
               │       └── com1.vue # template/style/script
               └── page1.vue # template/style/script

此次对项目构造从新整理后，开辟的体验好了许多，也避免了多人修正统一份文件，常常掩盖的题目，也大大提高了可保护性。搞项目构造能够不需要很深邃的手艺，然则一个好的构造真的是项目迈向胜利的一大步。

文章也会同步宣布到民众号上，迎接关注，迎接提意见：

《用vue+webpack搭建的前端项目构造》

    原文作者：对角另一面
    原文地址: https://segmentfault.com/a/1190000007055508
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞