Vuesax
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です
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コンポーネントの外観を見てみましょう
Vuesaxが今すぐ実装されているため、アプリケーションの準備が整いました
Vuesaxについて読む時間をとってくれてありがとう