vue ui创建vue_语义UI Vue-Vue的语义UI集成

最新推荐文章于 2024-05-16 09:36:47 发布

cuk5340

最新推荐文章于 2024-05-16 09:36:47 发布

阅读量158

点赞数

文章标签： vue java js css git ViewUI

原文链接：https://vuejsexamples.com/semantic-ui-vue-semantic-ui-integration-for-vue/

版权

vue ui创建vue

语义UI Vue (Semantic UI Vue)

Semantic UI Vue is the Vue integration for Semantic UI.

语义UI Vue是语义UI的Vue集成。

It is highly inspired on Semantic UI React If you have used it already, you will find Semantic UI Vue's API to be almost the same.

它对语义UI React的启发很大。如果您已经使用过，您会发现语义UI Vue的API几乎相同。

Semantic UI Vue is still under heavy development. Please, feel free to contribute.

语义UI Vue仍在大量开发中。请随意贡献。

View demo 查看演示 Download Source 下载源

正在安装 (Installing)

JavaScript (JavaScript)

The Semantic UI Vue package can be installed via NPM:

语义UI Vue软件包可以通过NPM安装：

$ npm install semantic-ui-vue --save

Installing Semantic UI Vue provides the JavaScript for your components. You'll also need to include a stylesheet to provide the styling for your components.

安装语义UI Vue为您的组件提供了JavaScript。您还需要包括一个样式表来为您的组件提供样式。

Once Semantic UI Vue has been installed, you will need to import it in your main file (usually index.js or main.js) and tell Vue to use it:

一旦安装了语义UI Vue，您将需要将其导入到主文件(通常是index.js或main.js )中，并告诉Vue使用它：

import Vue from 'vue';
import SuiVue from 'semantic-ui-vue';

/* ... */

Vue.use(SuiVue);

If you are not using Webpack, you can add the script in your html:

如果您不使用Webpack，则可以在html中添加脚本：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- head -->
</head>
<body>
  <div id="app"></div>
  <script src="node_modules/vue/dist/vue.min.js"></script>
  <script src="node_modules/semantic-ui-vue/dist/umd/semantic-ui-vue.min.js"></script>
  <script>
  Vue.use(SemanticUIVue);
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    template: '<span><sui-button primary>click me</sui-button>{{message}}</span>'
  });
  </script>
</body>
</html>

Or, in alternative, you can import it using a CDN:

或者，您也可以使用CDN导入它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://unpkg.com/semantic-ui-vue/dist/umd/semantic-ui-vue.min.js"></script>

Now you are ready to go! Check out the components' examples to see how to use them.

现在您可以开始了！查看组件的示例以了解如何使用它们。

CSS (CSS)

内容交付网络(CDN) (Content Delivery Network (CDN))

You can use the default Semantic UI stylesheet by including a Semantic UI CDN link in yourindex.html file. This is the quickest way to get started with Semantic UI Vue. You won't be able to use custom themes with this method.

您可以通过在yourindex.html文件中包含语义UI CDN链接来使用默认的语义UI样式表。这是使用语义UI Vue的最快方法。您将无法通过此方法使用自定义主题。

为避免意外行为，请仅使用最新版本的Semantic-UI (To avoid unexpected behavior please use only the last version of Semantic-UI)

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css"></link>

语义UI CSS包 (Semantic UI CSS package)

The Semantic UI CSS package is automatically synced with the main Semantic UI repository to provide a lightweight CSS only version of Semantic UI. Semantic UI CSS can be installed as a package in your project using NPM. You won't be able to use custom themes with this method.

语义UI CSS包会自动与主语义UI存储库同步，以提供仅CSS的轻量级版本的语义UI。可以使用NPM将语义UI CSS作为软件包安装在项目中。您将无法通过此方法使用自定义主题。

$ npm install semantic-ui-css --save

After install, you'll need to include the minified CSS file in your index.js file:

安装后，您需要将缩小CSS文件包括在index.js文件中：

import 'semantic-ui-css/semantic.min.css';

语义UI包 (Semantic UI package)

Install the full Semantic UI package. Semantic UI includes Gulp build tools so your project can preserve its own theme changes, allowing you to customize the style variables.

安装完整的语义UI软件包。语义UI包括Gulp构建工具，因此您的项目可以保留自己的主题更改，从而允许您自定义样式变量。

Detailed documentation on theming in Semantic UI is provided here.

此处提供了有关语义UI主题化的详细文档。

$ npm install semantic-ui --save-dev

After building the project with Gulp, you'll need to include the minified CSS file in your index.js file:

用Gulp构建项目后，您需要在index.js文件中包括缩小CSS文件：

import '../semantic/dist/semantic.min.css';

Nuxt.js模块 (Nuxt.js module)

You can use semantic-ui-vue as nuxt.js module

您可以将语义ui-vue用作nuxt.js模块

Usage:

用法：

Install semantic-ui-vue and semantic-ui-css packages
安装语义UI-Vue和语义UI-CSS软件包
Add this into your nuxt.config.js file:
将此添加到您的nuxt.config.js文件中：

{
  modules: [
    'semantic-ui-vue/nuxt', // includes styles from semantic-ui-css
    ['sematic-ui-vue/nuxt', {css: false}] // if you have your own semantic-ui styles
  ]
}

翻译自: https://vuejsexamples.com/semantic-ui-vue-semantic-ui-integration-for-vue/

vue ui创建vue

cuk5340

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue ui创建vue_语义UI Vue-Vue的语义UI集成

vue ui创建vue 语义UI Vue (Semantic UI Vue)Semantic UI Vue is the Vue integration for Semantic UI. 语义UI Vue是语义UI的Vue集成。 It is highly inspired on Semantic UI React If you have used it already, you will f...
复制链接

扫一扫