# zfc_2

**Repository Path**: lanbos_document/zfc_2

## Basic Information

- **Project Name**: zfc_2
- **Description**: zfc2017活动2
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-12-18
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fis-vue-component 组件化-demo
* 结合fis3、fis3-parser-vue-component实现vue组件化开发；
* 静态资源可以按需打包，只把require的资源整合并且合并；
* 支持公共库单独引用，提高缓存利用率；

## 功能

* 使用fis3-parser-vue-component实现vue单文件解析
* 使用fis3-postpackager-loader，实现静态资源按需加载，并且公共库（如zepto、vue、mod，icon.css,base.css)合并打包
* 使用fis3-postprocessor-autoprefixer，解析css3兼容并根据配置生成制定css前缀
* 使用fis-parser-typescript，实现es6文件解析
* 使用fis3-parser-less-2.x，实现less解析

## 使用步骤

1. `git clone` 
2. `cd `
3. `npm install`
4. `npm run dev`
5. `sudo fis3 server start`
6. `npm run prod` #打包

## 工具

* [fis3](http://fis.baidu.com/fis3/index.html)
* [vue](https://cn.vuejs.org/)
* [fis3-parser-vue-component](https://github.com/ccqgithub/fis3-parser-vue-component)
* [fis3-postprocessor-autoprefixer](https://github.com/huixisheng/fis3-postprocessor-autoprefixer)
* [fis-parser-babel-6.x](https://github.com/fex-team/fis-parser-babel-6.x)
* [fis3-parser-less-2.x](https://github.com/snadn/fis-parser-less-2.x)

```bash
├── fis-parser-es6-babel@1.0.0
├── fis-parser-less@0.1.3
├── fis3@3.4.36
├── fis3-hook-commonjs@0.1.26
├── fis3-hook-node_modules@2.2.9
├── fis3-hook-relative@2.0.0
├── fis3-parser-typescript@1.1.4 #可选
├── fis3-parser-vue-component@5.5.0
├── fis3-postpackager-loader@2.1.6
├── fis3-preprocessor-autoprefixer@0.1.1
```

## 配置
### 打包配置

	fis.match('::package', {
	  postpackager: fis.plugin('loader', {
	    allInOne: {
	      ignore: ['/static/lib/**.js','node_modules/**','/static/css/base/**'],
	    }
	  })
	});


### less解析

	fis.match('{*.vue:less,*.less}', {
	  rExt: 'css',
	  parser: [fis.plugin('less-2.x')],
	  postprocessor : fis.plugin("autoprefixer",{
	      "browsers": ['Safari >= 6', 'Chrome >= 12', "ChromeAndroid >= 4.0"],
	      "flexboxfixer": true,
	      "gradientfixer": true
	  })
	});


### vue解析
```js
fis.match('**.vue', {
  isMod: true,
  rExt: 'js',
  parser: [
    fis.plugin('vue-component', {
        ccssScopedFlag: '__vuec__',
        extractCSS: true,  
        styleNameJoin: '',  
    }),
    fis.plugin('typescript', {
      noImplicitUseStrict: true  
      // options
    })
  ]
});
```

## 代码
### 编译前-vue文件（a.vue)


	<style lang="less">
	.component-b {
	  line-height: 50px;
	  text-align: center;
	  color: #fff;
	  background: rgb(114, 61, 227);
	
	  a {
	    display: block;
	    border: 1px solid #ddd;
	  }
	}
	</style>
	
	<template>
	  <div class="component-b">
	    Component B <a href="javascript:;" @click="hello">Click Me</a>
	  </div>
	</template>
	
	<script>
	  module.exports = {
	    created() {
	      console.log("component b created !");
	    },
	    methods: {
	      hello() {
	        alert('hello!');
	      }
	    }
	  }
	</script>


### 编译后文件(a.js)


	define('component/a.vue', function(require, exports, module) {
	
	  module.exports = {
	    created() {
	      console.log('component a created !');
	    },
	    methods: {
	    }
	  }
	  var _vueTemplateString = "<div class=\"component-a\" __vuec__=\"\">\n  Component A\n</div>";
	  
	  module && module.exports && (module.exports.template = _vueTemplateString);
	  
	  exports && exports.default && (exports.default.template = _vueTemplateString);
	  
	
	});

### 代码结构
```bash
├── component  #vue模块
│   └── index.vue
├── conf #构建脚本
│   └── prod.py
├── dist #产出目录
├── fis-conf.js  #fis配置文件
├── node_modules 
│   └── jquery
├── package-lock.json
├── package.json
├── page #页面html
│   └── index.html
└── static #静态资源
    ├── css #样式（less）
    ├── image #图片
    ├── lib #配置文件等js（非模块）
    ├── modules #自定义模块
    └── page #每个页面的入口文件
```