# Nuxt.js と Ant Design Vue 2 テーマカスタマイズ

基本環境

  • nuxtjs 2.15
  • vuejs 2.7
  • ant design vue 1.7

📦 package.json 内容一覧















 

 
 










{
  "name": "hapicode.com",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/pwa": "^3.3.5",
    "ant-design-vue": "^1.7.8",
    "core-js": "^3.25.3",
    "less": "^4.1.3",
    "less-loader": "^7.3",
    "nuxt": "^2.15.8",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "prettier": "^2.7.1"
  }
}

# パッケージをインストール

yarn add ant-design-vue

# プラグインファイル作成

ルートディレクトリ配下にpluginsディレクトリ作成

plugins/antd-ui.jsファイル作成

import Vue from "vue";
import Antd from "ant-design-vue/lib";

Vue.use(Antd);

# スタイルファイル作成

stylesディレクトリをルート配下に作成

styles/theme.lessファイル作成

 















@import "~ant-design-vue/dist/antd.less";

@primary-color: #ccc; // primary color for all components
@link-color: #0d4f8c; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

ベースの antd.less ファイルインポートしてオーバーライトで書き換える

# nuxt.config.js 設定ファイル更新

nuxt.config.js ファイル内容















 
 


















 
 
 
 
 
 
 
 
 
 


export default {
  target: "static",

  head: {
    title: "hapicode.com",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  css: ["@/styles/theme.less"],
  plugins: ["@/plugins/antd-ui"],

  components: true,

  buildModules: [],

  modules: ["@nuxtjs/axios", "@nuxtjs/pwa"],

  axios: {
    baseURL: "/",
  },

  pwa: {
    manifest: {
      lang: "en",
    },
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
          math: "always",
        },
      },
    },
  },
};
  • css オプションにテーマファイルを追加
  • plugin オプションに antd-ui 紐付け
  • build オプションに less 解析できるように設定

less と less-loader

Nuxt.js のビルド時に Less を処理するためには、less と less-loader の依存関係をインストールしておく必要があります。

yarn add less less-loader
2023-06-06
  • javascript
  • antdv

関連記事

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
キーコード取得 & キーコード一覧
開発時によく使うゼロ埋めパディング作業まとめ
開発におけるコーディングルール・規約
javascript  指定場所にスムーズにスクロールする方法
react 強制的にレンダリングする方法
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
vuejs back to top button component 作成
Nuxtjs 動的なルーティング静的ページ自動生成
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
javascript 開発で出会った TypeError
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
javascript reduce 連想配列の合計計算覚えよう
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード