sakai vue cli

Vue 用の Sai 管理者テンプレート

ライブプレビュー

ライブ プレビューについては、Sakai Vue の Web サイトにアクセスしてください。

はじめる

Sai は、Vue プロジェクトにすぐに使える標準ツールを提供する、Vue CLI に基づく Vue のアプリケーション テンプレートです。開始するには、GitHub からこのリポジトリのクローンを作成し、npm または Yarn を使用して依存関係をインストールします。

 npm install

または

 yarn

次のステップでは、serve スクリプトを使用してアプリケーションを実行し、 http://localhost:8080/に移動してアプリケーションを表示します。これで、Sakai テンプレートを使用したアプリケーションの開発を開始できるようになります。

 npm run serve

Vue CLI スクリプト

次のコマンドは create-app-app から派生しています。

 "npm run serve": Starts the development server
"npm run build": Builds the application for deployment.
"npm run lint": Executes the lint checks.
"npm run test:unit": Runs the tests.

構造

「Sakai」は 2 つの主要な部分で構成されます。アプリケーションのレイアウトとリソース。 src フォルダー内のApp.vueは、ベース レイアウトのテンプレートを含む主要コンポーネントですが、レイアウトに必要な SASS 構造などのリソースはsrc/assets/フォルダー内に配置されます。

レイアウトコンポーネント

メインのレイアウトはApp.vueのテンプレートで、トップバー、メニュー、フッターなどのいくつかの子コンポーネントに分かれています。これは、メニュー状態、レイアウト モードなどのロジックを実装するApp.vueコンポーネントのテンプレートです。

メニュー

メニューは、PrimeVue MenuModel API に基づいてAppMenu.vueファイルで定義された別個のコンポーネントです。メニュー項目を定義するには、 App.vueファイルのデータ セクションに移動し、メニュープロパティを使用して独自のモデルをネストされた構造として定義します。

依存関係

Sai の依存関係は以下にリストされており、package.json に追加する必要があります。

{
    "primevue" : " ~3.12.2 " ,
    "primeicons" : " ~5.0.0 " ,
    "primeflex" : " ~3.1.2 " ,
}

PrimeVue テーマ

sacai は、PrimeVue 内で配布されている無料の Saga、Arya、Vela テーマを使用していますが、レイアウトの色は CSS 変数を介して使用されるテーマから派生するため、マテリアル、追い風、ブートストラップなどのあらゆる PrimeVue テーマでも使用できます。

SASS 変数

レイアウト変数をカスタマイズしたい場合は、src/layout フォルダーの下にある_variables.scssファイルを開きます。変数の大部分は使用されている PrimeVue テーマから派生しているため、このリストは非常に短いです。

src/assets/_variables.scss

$fontSize : 1rem;
$b or derRadius : 12px;
$transitionDuration : .2s;