在 Vue 中使用

在 Vue.js 中使用 Fower 非常简单。

安装#

首先,安装 fower 相关的类库:

npm install @fower/vue @fower/vue-template-compiler

配置 vue-loader#

然后,配置 vue-loader,把配置项的 compiler 配置为 require('@fower/vue-template-compiler')。假设你使用 vue-cli 或者 nuxt 构建 Vue 项目。配置如下:

vue.config.js
module.exports = {  parallel: false,  chainWebpack(config) {    config.module      .rule('vue')      .use('vue-loader')      .tap((options) => {        options.compiler = require('@fower/vue-template-compiler')        return options      })  },}

注意,使用 vue-cli 时,最好在 vue.config.js 增加配置 parallel: false

使用#

现在,你就可以直接在 HTML 中直接使用原子属性编写样式了:

<template>  <div toCenterY p-10 w-260 bgWhite rounded-10 shadow>    <img circle-48 src="/img/vue-logo.png" />    <div ml-10>      <div textXL fontBold>Evan You</div>      <span gray800>Creator of Vue.js.</span>    </div>  </div></template>

当然,如果你接受不了原子属性这种写法,你也可以使用 css 类名:

<template>  <div class="toCenterY p-10 w-260 bgWhite rounded-10 shadow">    <img src="/img/vue-logo.png" class="circle-48" />    <div class="ml-10">      <div class="textXL fontBold">Evan You</div>      <span class="gray800">Creator of Vue.js.</span>    </div>  </div></template>

智能提示#

为了更好的开发体验,我们提供了相应的 VS Code 插件:Fower IntelliSense. 安装完插件后,你就可以在编辑器中享受智能提示了。

fower-intellisense

例子源码#

你可以查看 Vue Exmaple 的源码:example-vue