https://github.com/nealst/skeleton-weex-plugin
weex骨架屏插件
https://github.com/nealst/skeleton-weex-plugin
skeleton weex
Last synced: about 1 year ago
JSON representation
weex骨架屏插件
- Host: GitHub
- URL: https://github.com/nealst/skeleton-weex-plugin
- Owner: NealST
- Created: 2019-04-22T12:22:38.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-18T08:37:18.000Z (about 7 years ago)
- Last Synced: 2025-03-18T13:55:12.077Z (about 1 year ago)
- Topics: skeleton, weex
- Language: JavaScript
- Size: 6.84 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.cn.md
Awesome Lists containing this project
README
## skeleton-weex-plugin
skeleton-weex-plugin是[skeleton-webpack-plugin](https://github.com/NealST/skeleton-webpack-plugin)的一个插件，它主要用于生成weex端的骨架屏代码
## 如何使用
skeleton-weex-plugin必须结合[skeleton-webpack-plugin](https://github.com/NealST/skeleton-webpack-plugin)一起使用.
在使用之前你必须先安装它们。
```
npm i skeleton-webpack-plugin skeleton-weex-plugin --save-dev
```
或者
```
yarn add skeleton-webpack-plugin skeleton-weex-plugin --dev
```
在安装好该webpack插件之后，你只需要在其plugins配置项中添加上skeleton-weex-plugin即可。
```
const SkeletonWebpackPlugin = require('skeleton-webpack-plugin')
cosnt HtmlWebpackPlugin = require('html-webpack-plugin')
const SkeletonWeexPlugin = require('skeleton-weex-plugin')
module.exports = {
entry: 'index.js',
mode: 'development',
output: {
path: 'dist',
filename: 'index.bundle.js'
},
plugins: [
new SkeletonWebpackPlugin({
outDir: __dirname,
projectDir: __dirname,
plugins: [SkeletonWeexPlugin]
}),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: true
})
]
}
```
然后当你启动dev server本地预览页面时,打开你的控制台，输入skeleton并按下回车键即可
skeleton-weex-plugin将会在你对应的页面目录下生成skeleton.vue的文件：
```
skeleton content
export default {
name: "Skeleton",
props: {
isShow: {
type: Boolean,
default: false
}
}
}
skeleton style content
```
怎样你就可以将骨架屏当初一个组件来使用，并控制它的隐藏和显示
## 它是如何实现的
作为skeleton-webpack-plugin的插件,skeleton-weex-plugin可以获取到骨架屏html与css的抽象语法树，skeleton-weex-plugin只需要将语法树转化成weex代码。这里我选择了vue作为weex的dsl。
