# fis3_init_pages

**Repository Path**: lanbos_document/vue_fis3_ts_less

## Basic Information

- **Project Name**: fis3_init_pages
- **Description**: 基于fis3制作的前端开发脚手架。对简单的多页面，代码轻量的需要js模块化项目较为友好。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: pure
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fis3_init
* 结合fis3、fis3-parser-vue-component实现vue组件化开发；
* 静态资源可以按需打包，只把require的资源整合并且合并；
* 支持公共库单独引用，提高缓存利用率；
* fis3及插件会安装到global上,避免node_modules黑洞
* 适合小型项目、简单的多页面项目
* 当前fis3已经交由社区维护，版本基本固定不再更新，使用人数也在减少，推荐复杂的项目用webpack进行构建。

## 功能

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

## 使用步骤

1. `git clone` 
2. `cd `
3. `npm run init`全局安装fis3及插件
4. `npm install`
5. `npm run dev`
6. `sudo fis3 server start -p 80`
7. `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
```

## 配置
### 打包配置

```js
      fis.match('::package', {
        postpackager: fis.plugin('loader', {
          allInOne: {
            js: function (file) {
              return "/static/js/" + file.filename + "_aio.js";
            },
            css: function (file) {
              return "/static/css/" + file.filename + "_aio.css";
            },
            ignore: '/node_modules/**.js'
          }
        })
      })
```

### less解析
```js
	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)

```html
	<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)

```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
├── build # fis3构建配置目录
│   ├── base.js #基本配置项
│   └── prod.js # 打包配置项
├── conf # npm script脚本
│   ├── init.py 
│   └── prod.py
├── dist #打包生成目录
├── fis-conf.js #fis3配置文件
├── index.html # 首页
├── node_modules #第三方js模块文件
├── pages #html放置
│   └── about.html
└──src #源码
       ├── components #vue文件
       ├── static # 静态文件目录
       └── store # vuex的store放置处
```
```bash
src/static
├── css #样式文件 使用less
├── image # 图片文件
├── lib #非模块js文件
├── modules #自定义模块js文件
└── page #个页面入口js文件目录
```