https://github.com/shenfe/vsnippet
Frontend view snippet base.
https://github.com/shenfe/vsnippet
code-base code-snippets frontend view vue-components
Last synced: 9 months ago
JSON representation
Frontend view snippet base.
- Host: GitHub
- URL: https://github.com/shenfe/vsnippet
- Owner: shenfe
- License: mit
- Created: 2018-04-18T02:37:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-24T05:53:42.000Z (over 7 years ago)
- Last Synced: 2025-01-24T10:32:43.267Z (11 months ago)
- Topics: code-base, code-snippets, frontend, view, vue-components
- Language: JavaScript
- Homepage:
- Size: 28.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vsnippet
> 前端视图层的片段组件库。使用scss、vue等形式编写和组织。既可以作为vue组件库，又可以作为view层公共代码库。**可以据此建立团队使用的基础样式和组件库。**
## Philosophy
使用开发vue组件的方式定义静态的基础组件以及组件的嵌套，html和css遵循就近原则，允许多种模板开发html，使用sass实现样式规则的更好复用，并利用vue的scope样式避免css污染。
## 静态html/css合成
调用`compose`，以一个vue文件为入口，将scss、vue等文件合成一对html、css。
### 命令行
执行脚本：
```bash
$ node path/to/compose.js -v path/to/view -o path/to/output
```
或配置npm命令：
```json
"scripts": {
"compose": "vcompose -v path/to/view -o path/to/output"
}
```
### Node.js API
```js
const compose = require('@shenfe/vsnippet');
compose('path/to/view', 'path/to/output');
```
### 示例
运行`node ./compose.js -v example2`，即在`example2`中生成`index.html`、`index.css`文件，是example2的完整html和css。
组件example2的vue形式源码：
```vue
div hello
example1
import Example1 from '../example1'
export default {
components: {
Example1
}
}
```
合成的组件example2的html、css：
```html
helloworld
```
```css
.name[data-v-24a2967e]{color:#333}
span{background-color:#000}
```
## Thanks
* [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)