[](https://res.cloudinary.com/practicaldev/image/fetch/s--zhhbvHcL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3. amazonaws.com/i/22gpstrydiklaeksom7u.png)

Vuesax是一个基于 vuejs 的组件框架,它是一个从头开始设计的框架,可以逐步采用。

该框架专注于促进应用程序的开发,在不删除必要功能的情况下改进应用程序的设计。我们希望所有组件在颜色、形状和设计上都是独立的,以实现我们喜欢所有前端的自由,但又不会失去创建和生产的速度。

安装

本安装教程适用于 vuesax 的使用:

• 网络包

• 查看 CLI 3

• NPM

• 节点.js

如果您打算通过 CDN 在项目中实现 vuesax,则无需过多解释,只需将脚本的导入放在 vuejs 之后

创建项目

首先,我们需要一个文件夹来托管我们的伟大项目,但由于我们将使用 Vue CLI,我们不需要创建它,我们在创建项目时自动创建它

所以,我们打算用 Vue CLI 3 启动一个项目,当然,如果我们在我们的计算机上全局安装了它,如果没有,执行这个脚本

npm install -g @vue/cli

进入全屏模式 退出全屏模式

已经全局安装,我们站在所有项目所在的文件夹中(我们不创建项目文件夹 Vue CLI 为我们做的)

我们执行脚本来启动一个 Vue CLI 项目

vue create my-project

进入全屏模式 退出全屏模式

准备好我们有一个包含 vuejs 项目所需文件的文件夹

然后我们进入在本例中称为我的项目的文件夹(vue create之后是项目的名称)

在项目中启动我们的测试服务器并看到一切顺利我们执行

npm run serve

进入全屏模式 退出全屏模式

一段时间后,我们的 Vue CLI 将启动我们的服务器,服务器路径几乎总是localhost:8080

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xOqUduz0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev .s3.amazonaws.com/i/7j1c06n1o2y1ho2vsekv.png)

准备好了,我们有了带有 vuejs 的活动服务器以及带有 vuesax 的项目所需的一切

安装Vuesax

现在我们已经准备好项目并准备好一切必要的东西(Vue CLI)为我们完成了一切,我们将使用以下命令添加 Vuesax

npm install vuesax

进入全屏模式 退出全屏模式

我们必须等待依赖项安装在我们的项目中

现在完成安装后,将缺少在应用程序的任何地方使用的实现

我们打开我们的主文件,在这种情况下是

• 我的项目/src/main.js

import Vue from 'vue'
import Vuesax from 'vuesax' //import dependency
import 'vuesax/dist/vuesax.css' // import css style

Vue.use(Vuesax) // implement Vuesax throughout the application

进入全屏模式 退出全屏模式

文件应该是这样的

import Vue from 'vue'
import App from './App.vue'
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css'

Vue.use(Vuesax)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

进入全屏模式 退出全屏模式

我们的应用程序中已经有了 vuesax,其中包含所有组件和功能

添加组件

我们已经在整个应用程序中使用了 vuesax,但是现在我们向模板添加了一个组件。

我们将添加一个按钮并替换文件my-project/src/components/HelloWorld.vue中的链接

文件应该很清楚,只有模板的一部分

<template>
  <div class="hello">
   <vs-button vs-type="filled">Primary</vs-button>
  </div>
</template>

进入全屏模式 退出全屏模式

实现之后,再来回顾一下我们的vs-button组件的样子

[](https://res.cloudinary.com/practicaldev/image/fetch/s--RqU5K483--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https:// /thepracticaldev.s3.amazonaws.com/i/qlyek9jdujlubcd5zqzv.gif)

准备好我们使用 Vuesax 的应用程序正在运行,现已实现

非常感谢您花时间阅读有关 Vuesax 的信息

链接

• 维萨克斯

• Github Vueasx

• 查看 CLI

• 网络包

• NPM vuesax