Help us understand the problem. What is going on with this article?

Vuejsの新しいフレームワークを実装する

More than 1 year has passed since last update.

Vuesax

vuesax-logo.png

Vuesax は、vuejsに基づいたコンポーネントのフレームワークであり、段階的に採用できるようにゼロから設計されたフレームワークです。

フレームワークは、アプリケーションの開発を容易にし、必要な機能を削除せずにアプリケーションの設計を改善することに重点を置いています。私たちはすべてのコンポーネントが色、形、デザインで独立していて、すべてのフロントエンドが好きですが、作成や制作のスピードを損なうことがないようにします。

インストール

このインストレーションチュートリアルでは、vuesaxの使用方法について説明します。

  • webpack
  • Vue CLI 3
  • NPM
  • Node.js

CDNによってプロジェクトにvuesaxを実装しようとしている場合は、vuejsの後にスクリプトのインポートを置くだけで説明することはあまりありません

プロジェクトを作成する

まず、偉大なプロジェクトをホストするフォルダが必要ですが、Vue CLIを使用する予定であるため、作成する必要はなく、プロジェクトを作成するときに自動的に作成します
そのため、Vue CLI 3を使用してプロジェクトを開始します。もちろん、それがコンピュータにグローバルにインストールされている場合は、このスクリプトを実行してください

npm install -g @vue/cli

すでにグローバルにインストールされている場合は、すべてのプロジェクトが保存されているフォルダに置かれます(プロジェクトフォルダVue CLIは作成しません)

スクリプトを実行してVue CLIプロジェクトを開始します

vue create my-project

vuejsを持つプロジェクトに必要なすべてのファイルが入ったフォルダが用意されています。
この場合、私のorijectと呼ばれるフォルダを入力します( vue createはプロジェクトの名前です)

プロジェクト内でテストサーバーを起動し、すべてがうまくいくことを確認します

npm run serve

しばらくすると、私たちのVue CLIはサーバーを立ち上げます。ほとんどの場合、サーバーパスは localhost:8080です

1_r-QPtbwcOzOiz35mAN-NTg.png

Vuesaxをインストールする

必要なものをすべて準備してプロジェクトを準備したので(Vue CLI)、私たちのためにすべてを行います。コマンドでVuesaxを追加します

npm install vuesax

依存関係がプロジェクトにインストールされるのを待つ必要があります

今すぐインストールが完了すると、アプリケーション内のどこでも使用するための実装が不足します

メインファイルを開きます。

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

The file should be like this

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コンポーネントの外観を見てみましょう

1_aOG89HlIJlmTx_CBb_7tRQ.gif

Vuesaxが今すぐ実装されているため、アプリケーションの準備が整いました

Vuesaxについて読む時間をとってくれてありがとう

リンク

luisDanielRoviraContreras
I love the front end, I am a co-founder of @lusaxweb, vuesax and DevAwesome, Vuenut I love @vuejs
https://github.com/luisDanielRoviraContreras
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした