基于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查看演示 Downloa...

cuk5340

3800人浏览 · 2020-07-24 20:59:18

cuk5340 · 2020-07-24 20:59:18 发布

基于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 size
  padding: '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框架

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^