フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

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

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について読む時間をとってくれてありがとう

リンク

[紹介元] CSSタグが付けられた新着投稿 – Qiita Vuejsの新しいフレームワークを実装する

コメント

記事に戻る

コメントを残す