Skip to content

Commit cc378e4

Browse files
author
realign
committed
first push
1 parent 322cb85 commit cc378e4

File tree

8 files changed

+500
-61
lines changed

8 files changed

+500
-61
lines changed

.eslintrc.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
module.exports = {
2+
"env": {
3+
// "browser": true,
4+
"es6": true,
5+
"node": true,
6+
},
7+
"globals": {
8+
"module": true,
9+
},
10+
"extends": "eslint:recommended",
11+
parser: "babel-eslint",
12+
"parserOptions": {
13+
"sourceType": "module",
14+
parser: "babel-eslint",
15+
},
16+
"rules": {
17+
"indent": [
18+
"error",
19+
4
20+
],
21+
"linebreak-style": [
22+
"error",
23+
"unix"
24+
],
25+
"quotes": [
26+
"error",
27+
"single"
28+
],
29+
"semi": [
30+
"error",
31+
"always"
32+
],
33+
// "comma-dangle": [
34+
// "error",
35+
// "always"
36+
// ],
37+
"no-console": "off",
38+
}
39+
};

.gitignore

Lines changed: 2 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,3 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
1+
node_modules
72

8-
# Runtime data
9-
pids
10-
*.pid
11-
*.seed
12-
*.pid.lock
13-
14-
# Directory for instrumented libs generated by jscoverage/JSCover
15-
lib-cov
16-
17-
# Coverage directory used by tools like istanbul
18-
coverage
19-
20-
# nyc test coverage
21-
.nyc_output
22-
23-
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24-
.grunt
25-
26-
# Bower dependency directory (https://bower.io/)
27-
bower_components
28-
29-
# node-waf configuration
30-
.lock-wscript
31-
32-
# Compiled binary addons (https://nodejs.org/api/addons.html)
33-
build/Release
34-
35-
# Dependency directories
36-
node_modules/
37-
jspm_packages/
38-
39-
# TypeScript v1 declaration files
40-
typings/
41-
42-
# Optional npm cache directory
43-
.npm
44-
45-
# Optional eslint cache
46-
.eslintcache
47-
48-
# Optional REPL history
49-
.node_repl_history
50-
51-
# Output of 'npm pack'
52-
*.tgz
53-
54-
# Yarn Integrity file
55-
.yarn-integrity
56-
57-
# dotenv environment variables file
58-
.env
59-
60-
# next.js build output
61-
.next
3+
package-lock.json

README.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,37 @@
1-
# vue-sfc-descriptor-stringify
1+
# vue-sfc-descriptor-stringify
2+
3+
> Translate Vue SFC descriptor to String.
4+
> 将 vue-sfc 描述 转为 字符串。
5+
6+
## Scene
7+
8+
需要操作 `vue` 文件,进行 `属性` 或者 `内容` 的更改,类似 `babel`
9+
10+
## Usage
11+
12+
### Install
13+
14+
```bash
15+
# install
16+
$ npm i vue-sfc-descriptor-stringify -D
17+
```
18+
19+
### Call
20+
21+
```js
22+
const Stringify = require('vue-sfc-descriptor-stringify');
23+
24+
/**
25+
* @name Stringify
26+
* @param
27+
* sfcDescriptor 需要转换成 string 的 sfc
28+
* originSfcDescriptor 原始 sfc,如果没有对 sfcDescriptor 处理的话,跟 sfcDescriptor 是一样的
29+
* options 配置
30+
* indents 缩进
31+
* template: 2 // 默认
32+
* script: 0 // 默认
33+
* style: 0 // 默认
34+
* @returns String 转换之后的 vue-sfc 内容
35+
*/
36+
const str = Stringify(sfcDescriptor, originSfcDescriptor, options);
37+
```

__test__/index.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const fs = require('fs');
2+
const _ = require('./../src/lib/util');
3+
const compiler = require('vue-template-compiler');
4+
const Stringify = require('../src/index');
5+
6+
const source = fs.readFileSync('./tpl/multiple-styles.vue', 'utf8');
7+
const descriptor = compiler.parseComponent(source) || {};
8+
const oriDescriptor = _.cloneDeep(descriptor);
9+
10+
descriptor.styles.forEach((item) => {
11+
if(!item.attrs) {
12+
item.attrs = {};
13+
}
14+
15+
item.attrs.lang = 'less';
16+
});
17+
18+
const result = Stringify(descriptor, oriDescriptor);
19+
20+
fs.writeFile('./tpl/multiple-styles_new.vue', result, (err) => {
21+
console.log(err);
22+
});

__test__/tpl/multiple-styles.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
2+
<template>
3+
<div id="app">
4+
<el-menu
5+
router
6+
mode="horizontal"
7+
:default-active="activeIndex"
8+
:class="defaultClass">
9+
<el-menu-item index="/">
10+
物料堆页面
11+
<el-tooltip
12+
effect="light"
13+
placement="right-end">
14+
<div slot="content">
15+
<p class="m-custom-tips">
16+
1. 选择需要的区块,点击按钮添加到预览区<br>
17+
2. 拖拽预览区的区块,进行排序<br>
18+
3. 需要的区块添加完成,点击右上角进行其他信息编辑<br>
19+
4. 完善路由、文件路径等信息<br>
20+
5. 点击“开始创建”,完成后点击在编辑器中打开
21+
</p>
22+
</div>
23+
<i class="el-icon-question"></i>
24+
</el-tooltip>
25+
</el-menu-item>
26+
</el-menu>
27+
<div class="g-body">
28+
<router-view></router-view>
29+
</div>
30+
</div>
31+
</template>
32+
33+
34+
35+
<script>
36+
export default {
37+
name: 'app',
38+
data() {
39+
return {
40+
defaultClass: 'g-el-menu-fix-top',
41+
activeIndex: '/',
42+
};
43+
},
44+
}
45+
</script>
46+
47+
<style lang="scss" type="text/less">
48+
html,
49+
body,
50+
#app {
51+
position: relative;
52+
margin: 0;
53+
padding: 0;
54+
width: 100%;
55+
height: 100%;
56+
}
57+
#app {
58+
font-family: sans-serif, Helvetica, Arial;
59+
-webkit-font-smoothing: antialiased;
60+
-moz-osx-font-smoothing: grayscale;
61+
text-align: center;
62+
color: #2c3e50;
63+
margin-top: 0;
64+
}
65+
.el-menu.g-el-menu-fix-top {
66+
position: sticky;
67+
top: 0;
68+
z-index: 10;
69+
}
70+
.g-body {
71+
position: relative;
72+
height: calc(100% - 65px);
73+
}
74+
.m-custom-tips {
75+
margin: 0 4px;
76+
line-height: 20px;
77+
}
78+
79+
$scrollbar-w: 8px;
80+
$scrollbar-h: 8px;
81+
$scrollbar-color: #aaa;
82+
* {
83+
::-webkit-scrollbar {
84+
width: $scrollbar-w;
85+
height: $scrollbar-h;
86+
background: #efefef;
87+
}
88+
::-webkit-scrollbar-thumb {
89+
background: $scrollbar-color;
90+
border-radius: $scrollbar-w / 2;
91+
}
92+
}
93+
</style>

package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "vue-sfc-descriptor-stringify",
3+
"version": "0.0.1",
4+
"description": "Translate vue sfc to string.",
5+
"main": "src/index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"devDependencies": {
10+
"babel-eslint": "^10.0.1",
11+
"body-parser": "^1.19.0",
12+
"eslint": "^5.16.0",
13+
"jest": "^22.3.0",
14+
"lodash": "^4.17.15",
15+
"n-s-logs": "0.2.0",
16+
"vue-template-compiler": "^2.5.13"
17+
},
18+
"dependencies": {
19+
"indent-string": "^3.2.0"
20+
},
21+
"repository": {
22+
"type": "git",
23+
"url": "git+https://github.com/ReAlign/vue-sfc-descriptor-stringify.git"
24+
},
25+
"keywords": [
26+
"vue",
27+
"sfc",
28+
"toString",
29+
"stringify"
30+
],
31+
"author": "ReAlign",
32+
"license": "MIT",
33+
"bugs": {
34+
"url": "https://github.com/ReAlign/vue-sfc-descriptor-stringify/issues"
35+
},
36+
"homepage": "https://github.com/ReAlign/vue-sfc-descriptor-stringify#readme"
37+
}

0 commit comments

Comments
 (0)