fis-vuejs-seed, FIS3与VueJS结合开发简书单页面应用DEMO

分享于 

4分钟阅读

GitHub

  繁體
FIS3与VueJS结合开发简书单页面应用DEMO
  • 源代码名称:fis-vuejs-seed
  • 源代码网址:http://www.github.com/zhangtao07/fis-vuejs-seed
  • fis-vuejs-seed源代码文档
  • fis-vuejs-seed源代码下载
  • Git URL:
    git://www.github.com/zhangtao07/fis-vuejs-seed.git
    Git Clone代码到本地:
    git clone http://www.github.com/zhangtao07/fis-vuejs-seed
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/zhangtao07/fis-vuejs-seed
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    使用FIS3和VueJS开发单页面应用

    简介

    demo应该是小而美的

    本项目为使用FIS3(以下简称FIS)与VueJS开发单页面应用示例。由于目前VueJS相关的demo项目比较少而且简单,因此我们希望通过一个更加偏向实际的项目来体现FIS3与VueJS的结合。

    我们选择了简书这款颇具情怀的产品来实现其列表页和文章页部分内容(仅供学习FIS3与VueJS使用,设计与素材内容版权归简书所有)。

    DEMO使用

    快速开始
    #安装fis3npm install -g fis3#下载项目git clone https://github.com/zhangtao07/fis-vuejs-seed.git#安装模块化插件,fis3支持本地插件npm install [-g] fis3-hook-module
    npm install [-g] fis3-postpackager-loader#编译预览cd fis-vuejs-seed
    fis3 release
    fis3 server start --type node
    demo截图

    列表页

    文章页

    FIS3结合

    FIS基础的压缩、打包、md5、加cdn域名、csssprite、文件监听、自动刷新、本地调试等当然不在话下,以下主要描述与VueJS直接相关的一些结合。

    目录结构

    开发目录结构如下所示:

    project
    
    
      ├─ component_modules   (社区模块)  
    
    
      ├─ components    (工程模块)
    
    
      │  ├─ directive  (指令)
    
    
      │  │  └─ more
    
    
      │  ├─ filter     (过滤器)
    
    
      │  │  └─ more
    
    
      │  ├─ component  (组件)
    
    
      │  │  ├─ header
    
    
      │  │  └─ footer
    
    
      │  └─ page       (页面)
    
    
      │     ├─ article
    
    
      │     └─ home
    
    
      ├─ static    (非业务相关资源)
    
    
      │  ├─ css  
    
    
      │  ├─ fonts  
    
    
      │  ├─ images  
    
    
      │  ├─ js
    
    
      ├─ fis-conf.js    (fis编译配置)
    
    
      ...
    
    
    

    通过FIS您可以轻松定制自己的开发目录,灵活适配各种框架的目录特点,提升可维护性。同时能按照不同的部署要求添加一个或多个部署配置。

    模板内嵌

    VueJS组件开发过程中可以通过__inline轻松将模板内容编译到js中,提升可维护性。

    module.exports=Vue.component("c-list", {
        template:__inline('list.html')
    })
    异构语言编译

    less、sass、jade等等异构语言的编译都有相应的支持,如本项目中sass的编译配置:

    //sass的编译fis.match('**/*.scss', {
        rExt:'.css', // from .scss to .css    parser:fis.plugin('sass', {
            //fis-parser-sass option    })
    });

    您可以查看fis文档或在npm中搜索相应的插件。

    模块化开发
    • 组件拆分

      组件拆分是模块化基本要素,VueJS本身就是推荐由组件来组织页面,如component中的各个组件。

    • 依赖分析

      资源中存在依赖关系,本项目使用了fis的modjs模块化方案,您可以像开发nodejs一样直接写require便能自动完成依赖分析和资源加载。

    • 静态资源表

      如果您想了解资源加载细节,推荐您了解FIS静态资源表机制,您可以看到生成的页面中已经有资源配置。更多细节请查看FIS官网文章。

    组件仓库

    为了保证诸如VueJS、jQuery等社区资源都能通过modjs方式组件式封装和加载,您可以进入FIS Component下载或提交社区资源。

    相关链接


    相关文章