vue pages多入り口項目+chainWebpackグローバル引用略語説明

プロジェクト構造
ノドドドmodules落プロジェクト依存パッケージカタログ
├——build铅プロジェクトwebpack機能カタログ
├——config铅プロジェクトの配置項目のフォルダ
├——src铉先端資源目録
├を読む——イメージギャラリー
├-components葃公共部品カタログ
ページの目次
├├の空を飛ぶ
ページを読むときには、├-components
ページをめくる際には、ルートディレクトリ
ページの目次
ページをめくるときに、ページテンプレートを参照してください。
├├├├├├啣啛啛page 1 vue配置ファイル
啣啣の啣を啣る——page 1.js菗page 1入口文書
├├の空を飛ぶ
璣璣の璣を璣る
├を超える
煥璣を読む——store状态管理store目次
ギティグノレファイルを無視する
├——.env铅グローバル環境配置ファイル
├——.env.dev铅開発環境配置ファイル
postcssrc.js菗postcss配置ファイル
├——babel.co nfig.js璣babel配置ファイル
├——package.json芫包管理ファイル
├——vue.co nfig.js葃CLIプロファイル
►yarn.lock〓〓yarn依存情報ファイル
vue config.js配置

pages: {
  page1: {
   entry: "src/pages/page1/main.js",
   template: "public/index.html",
   filename: "index.html",
   title: "page1",
   chunks: ["chunk-vendors", "chunk-common", "page1"]
  },
  page2: {
   entry: "src/pages/page1/main.js",
   template: "public/index.html",
   filename: "page2.html",
   title: "page2",
   chunks: ["chunk-vendors", "chunk-common", "page2"]
  },
 },

デフォルトでプロジェクトを開く必要があります。filenameをindexに設定すればいいです。そうでないと詳細urlを通じて対応項目に入る必要があります。
*他の技術案があれば、コメントを歓迎します。
chainWebpackグローバル参照略語

chainWebpack: config => {
  config.resolve.alias
   .set("@", resolve("src")) // key,value    ，  .set('@@', resolve('src/components'))
   .set("_c", resolve("src/components"))
   .set("_js", resolve("src/assets/js"));
 },

補足知識：vue-quill-editorの使用とカスタマイズ
最近はvue＋element uiでアプリケーションを書きます。リッチテキストエディタを使います。以前はプロジェクトをしていましたが、ueditorを使っていました。でも、vueとの互換性があまりよくないです。いくつかを比べてから、vue-quill-editorを選びました。
vue-quill-editorはQuillに基づいて、Vueに適用されるリッチテキストエディタで、サービス端末のレンダリングと単一ページのアプリケーションをサポートしています。ここでは基本的な取り付けと部分的なシンプルなカスタマイズのみを紹介します。他の人の書いたものをたくさんひっくり返しましたが、私のプロジェクトには無効です。最後に自分で苦しめました。この記録で忘れます。
一、据え付ける
1.モジュールの取り付け
npm install vue-quill-editor Csave
2.vueコンポーネント

<template>
 <div class="edit_container">
 <quill-editor
  v-model="content"
  ref="myQuillEditor"
  :options="editorOption"
  @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
  @change="onEditorChange($event)">
 </quill-editor>
 </div>
</template>
 
<script>
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 import { quillEditor } from 'vue-quill-editor';
 
 export default {
 name: "addJournal",
 components: {
  quillEditor
 },
 data() {
  return {
  content: ``,
  editorOption: {},
  };
 },
 methods: {
  onEditorReady(editor) {}, //      
  onEditorBlur(){}, //       
  onEditorFocus(){}, //       
  onEditorChange(){}, //       
 },
 computed: {
  editor() {
  return this.$refs.myQuillEditor.quill;
  },
 },
 }
</script>

これで、vue-quill-editorはインストールされました。効果図は以下の通りです。

二、定（zhe）制（teng）
ここでは簡単に2つの操作を紹介します。スタイルの変更とカスタムツールバーです。
1.スタイルの変更
a）vue-quill-editor編集ボックスの高さを変更する
これは簡単です。vueコンポーネントの「style」タブにスタイルを追加すればいいです。

.quill-editor{
 height: 400px;
}

編集枠の高さを調整すると、編集内容の高さが編集枠の高さを超えていると、編集枠にスクロールバーが表示されます。
b）ツールバーの配置を変更する
ここで注意したいのですが、webstormを使って作成したvueコンポーネントには、styteタグのデフォルトにscoped属性が付加されます。つまり、現在のモジュールの要素だけに有効で、ツールバーは外部から導入されています。したがって、下のスタイルはscoped属性のstyleラベルに記入しなければなりません。

.ql-toolbar.ql-snow{
 text-align: left;
}

修正したスタイルは以下の通りです。

2.カスタムツールバーボタン
フォントサイズの調整を例にとって、これはデフォルトの調整ボタンです。複数のピクセルサイズのプルダウン選択ボックスに変更したいです。

step 1：vueコンポーネントにquillモジュールを導入し、ホワイトリストを修正し、スタイルを登録する

import * as Quill from 'quill';
let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', false];//false     
Quill.register(fontSizeStyle, true);

step 2:quill-editorのoption属性値を変更します。

editorOption: {
 modules: {
 toolbar: [["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{header: 1}, {header: 2}], [{list: "ordered"}, {list: "bullet"}], [{script: "sub"}, {script: "super"}], [{indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}],
  [{size: fontSizeStyle.whitelist}], [{header: [1, 2, 3, 4, 5, 6, !1]}], [{color: []}, {background: []}], [{font: []}], [{align: []}], ["clean"], ["link", "image", "video"]],
 },
}

このmodulesの値はvue-quill-editorモジュールのvue-quill-editor.jsのmodules値を参照して設定しています。変更するツールバーボタンの値をStep 1で設定したwhitelist値に置き換えればいいです。
Step 3:カスタムオプションのcssスタイルを追加します。

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
 content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
 content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
 content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
 content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
 content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
 content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
 content: '36px';
}

このタイプのセレクタはquill.snow.cs.jsの中から見つけられます。私達がするのはdata-valueの値を修正するだけです。
変更後のツールバー:

以上のvue pages多入り口項目＋chainWebpackグローバル引用略語説明は小編集が皆さんに共有している内容です。参考にしていただければと思います。どうぞよろしくお願いします。