https://github.com/laomu1988/fis3-vue-demo
fis3打包单文件vue组件demo
https://github.com/laomu1988/fis3-vue-demo
fis3 fis3-vue vue
Last synced: 2 months ago
JSON representation
fis3打包单文件vue组件demo
- Host: GitHub
- URL: https://github.com/laomu1988/fis3-vue-demo
- Owner: laomu1988
- Created: 2016-06-01T13:04:02.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-07T07:10:11.000Z (about 8 years ago)
- Last Synced: 2025-01-31T12:12:36.244Z (4 months ago)
- Topics: fis3, fis3-vue, vue
- Language: JavaScript
- Size: 67.4 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 使用fis3打包单文件vue组件
> 在项目开发过程中，我们常把页面拆分成一个个小组件，每个组件由css、模板、js组成。
一般情况下，三个部分我们分别写在不同的文件中，但是假如页面有很多小组件，每个组件都拆分成三个文件，最终就会产生大量的小文件，不便于管理。
这时我们通过将组件的三个部门写在同一个文件来避免多个小文件，并且每个组件一个文件也更加直观。
使用[fis3-parser-vue-component](https://github.com/okoala/fis3-parser-vue-component)
## 详细说明
### 1.首先新建一个项目，文件目录如下
```
+-- index.html
+-- weight
|-- app.vue
+-- js
|-- base
|-- vue.js
|-- mod.js
```
文件weight/app.vue
```html
// weight/app.vue
h1 {
color: #f00;
}
{{msg}}
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
```
文件index.html
```html
var App = require('weight/app.vue');
new Vue({
el: 'body',
components: {
app: App
}
});
```
### 2.安装打包工具
```
### 全局安装fis3
npm install fis3 -g -d
npm install fis3-hook-module -g -d
npm install fis3-hook-relative -g -d
npm install fis3-postpackager-loader -g -d
### es6 vue相关模块
npm install fis-parser-babel-5.x
npm install fis3-parser-vue-component
```
### 3.编写fis-conf.js
```js
// fis-conf.js
// 开启模块化包装amd，cmd
fis.hook('module', {mode: 'auto'});
// 使用相对路径。
fis.hook('relative');
fis.match('**', {relative: true});
fis
// 打包vue文件
.match(/\.vue$/i, {
rExt: '.js',
isMod: true,
isJsLike: true,
isComponent: true,
parser: [fis.plugin('vue-component'), fis.plugin('babel-5.x')]
})
// 普通js不增加module名称
.match("*.js", {
isMod: false,
isES6: false,
isComponent: false,
useHash: false,
// 设置js文件为babel解析，支持es6的写法。
// parser: fis.plugin('babel-5.x')
})
.match('::package', {
// npm install [-g] fis3-postpackager-loader
// 分析 __RESOURCE_MAP__ 结构，来解决资源加载问题
// allInOne: true, //js&css打包成一个文件
sourceMap: true, //是否生成依赖map文件
// useInlineMap: true //是否将sourcemap作为内嵌脚本输出
postpackager: fis.plugin('loader', {})
})
```
### 4.编译
执行 `fis3 release -d output`,即可看到文件output/weight/app.js和output/weight/app.css
### 5. 其他语言支持
* less,scss等编译语言可以参考[fis3-parser-vue-component](https://github.com/okoala/fis3-parser-vue-component)进行配置
* 部分编辑器可能不支持单文件vue语法高亮，使用html格式即可