基于vue的响应式ui框架_基于Vue.js的响应式和可配置UI框架

基于vue的响应式ui框架

Framevuerk (Framevuerk)

Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.

快速，响应式，多语言，方向支持和基于Vue.js的可配置UI框架。

View demo 查看演示 Download Source 下载源

建立 (Setup)

First at all, you should install Framevuerk and of course Vue from terminal.

首先，您应该从终端安装Framevuerk ，当然还要安装Vue 。

npm install vue --save
npm install framevuerk --save

You can also install these, just if you want active touch actions support, fvDatepicker jalaali dates supoort and icons.

您也可以安装这些，就算需要主动触摸操作支持，也可以安装fvDatepicker jalaali fvDatepicker supoort和图标。

npm install idate --save
npm install hammerjs --save
npm install font-awesome --save

And just follow the example and use it! (commonjs syntax and require also available)

并按照示例进行操作即可！ ( commonjs语法和require也可用)

// Vue package
import Vue from 'vue'// Framevuerk main js file
import Framevuerk from 'framevuerk/dist/framevuerk.js'// If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
import 'framevuerk/dist/framevuerk.css'// IDate package, just if you want globally support jalaali dates for fvDatepicker
import IDate from 'idate'
Framevuerk.use('date', IDate)// Hammer package, just if you want active touch actions support
import Hammer from 'hammerjs'
Framevuerk.use('hammer', Hammer)// Font-Awesome icons, just if you want active icons
// If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
import 'font-awesome/css/font-awesome.css'// Active Framevuerk...
Vue.use(Framevuerk)// And finally, Initializing app
const app = new Vue({el: "#app"
});"

Finally you need to create your template just like this.

最后，您需要像这样创建模板。

<html><head><link rel="stylesheet" href="path/to/your/app.css"/></head><body><fv-main id="app"><!-- Your Content --></fv-main><script src="path/to/your/app.js"></script></body>
</html>

定制 (Customize)

Framevuerk can have different language, direction, and colors based on the user's taste. To setup your custom version, create a file called .framevuerkrc.js in root of your project and put these on:

Framevuerk可以根据用户的口味使用不同的语言，方向和颜色。要设置您的自定义版本， .framevuerkrc.js在项目的根目录中创建一个名为.framevuerkrc.js的文件，并将其放在以下位置：

module.export = {// config name'config-name': 'foobar',// your locale and direction.locale: 'en', // or 'fa'direction: 'ltr', // or 'rtl'// theme colors:'primary-color': '#41b883','secondary-color': '#35485d','danger-color': '#dd4b39','warning-color': '#ef8f00','info-color': '#14b0cf','bg-color': '#f9f9f9',// base padding sizepadding: '15px',// base animation speed'transition-speed': '0.35s',// base border radius applied to buttons, inputs and etc.'border-radius': '4px',// base shadow size applied to header, footer, form elements and etc.'shadow-size': '3px'
}

And output files goes to ./node_modules/framevuerk/dist directory:

输出文件进入./node_modules/framevuerk/dist目录：

framevuerk-foobar.js

framevuerk-foobar.js
framevuerk-foobar.css

framevuerk-foobar.css
framevuerk-foobar.min.js

framevuerk-foobar.min.js
framevuerk-foobar.min.css

framevuerk-foobar.min.css

You can also use .framevuerkrc.json, .framevuerkrc or framevuerk key inside your package.json to pass this variables to Framevuerk!

您还可以在package.json使用.framevuerkrc.json ， .framevuerkrc或framevuerk键，以将此变量传递给Framevuerk！

Framevuerk apply these config by this cli command:

Framevuerk通过此cli命令应用以下配置：

./node_modules/.bin/framevuerk
# or on npm scripts, just:
framevuerk

翻译自: https://vuejsexamples.com/responsive-and-configurable-ui-framework-based-on-vue-js/

基于vue的响应式ui框架