Use with uni-app
#
InstallationFirst, install fower bindings for uniapp.
- npm
- Yarn
npm install @fower/uniapp @fower/uni-template-compiler
yarn add @fower/uniapp @fower/uni-template-compiler
vue-loader
#
Config Then, configure vue-loader
compiler option to require('@fower/uni-template-compiler')
. We assume you are using vue-cli
to build Vue App:
module.exports = { parallel: false, chainWebpack(config) { config.module .rule('vue') .use('vue-loader') .tap((options) => { options.compiler = require('@fower/uni-template-compiler') return options }) },}
#
Enjoy itNow, you can write Atomic Props directly in HTML:
<template> <view toCenterY p-10 w-260 bgWhite rounded-10 shadow> <image circle-48 src="/img/vue-logo.png" /> <view ml-10> <view textXL fontBold> Evan You </view> <text gray800>Creator of Vue.js.</text> </view> </view></template>
If you don't like Atomic Props, you can use atomic css class instead:
<template> <view class="toCenterY p-10 w-260 bgWhite rounded-10 shadow"> <image src="/img/vue-logo.png" class="circle-48" /> <view class="ml-10"> <view class="textXL fontBold">Evan You</view> <text class="gray800">Creator of Vue.js.</text> </view> </view></template>
#
IntelliSenseTo get IntelliSense in VS Code, just to install VS Code plugin: Fower IntelliSense.
#
Example source codeYou can view the example souce code in github: example-uniapp