02-VuePressデザイン - 動作原理

1.何VuePress

  ウェブサイトのVuePressはある  のVueVueのルータ  と  のWebPACK  駆動単一ページのアプリケーション

 

2、クイックスタートVuePress

@ インストール糸:https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable 

#VuePressは、ローカルとしてマウント依存します
毛糸追加 -Dまたはvuepress番号:NPMは-D vuepressをインストール
// 1、フォルダを作成し、入力し 
vuepress-ます。mkdir vuepress-スターター&& CDをスターター  
 // 2、プロジェクトの初期化
糸がvuepress作成
 // プロジェクトを開始するために、3を 
糸DEVを

 

  • docs/.vuepress:グローバル設定、コンポーネント、静的リソースを格納するために使用されます。
  • docs/.vuepress/components:このディレクトリVueのアセンブリは、自動的にグローバルなコンポーネントとして登録されます。
  • docs/.vuepress/theme:ローカルテーマを保存するために使用します。
  • docs/.vuepress/styles:スタイルに関連するストア文書に使用されます。
  • docs/.vuepress/styles/index.styl:自動的に適用されますグローバルスタイルファイルは、デフォルトのスタイルよりも優先順位が高い、最終CSSファイルの最後に生成されます。
  • docs/.vuepress/styles/palette.styl:デフォルトの色の定数を上書きするか、新しいスタイラス色定数を設定するために使用します。
  • docs/.vuepress/public:静的リソースディレクトリ。
  • docs/.vuepress/templates:ストアHTMLテンプレートファイル。
  • docs/.vuepress/templates/dev.html:HTMLテンプレートは、開発環境用のファイル。
  • docs/.vuepress/templates/ssr.html:HTMLテンプレート構築する際のVue SSRに基づいてファイル。
  • docs/.vuepress/config.js:エントリファイル、構成ファイル、およびそれであってもよいです  YML か  toml
  • docs/.vuepress/enhanceApp.js:強化されたクライアントアプリケーション。

 

3、VuePressテーマ

= module.exportsは{ 
    テーマ: 'vuepress-テーマ-X-'、   // 設定トピック名-公式とコミュニティのトピック 
    themeConfig:{ // 他の構成トピック
        // ... 
    } 
}
// カスタムテーマが 
最初のドキュメントルートディレクトリにある.vuepress /テーマディレクトリを作成し、
その後、Layout.vueファイルを作成します。
  
ここでは、同じ一般的なアプリケーションのVueの開発などです。あなたのテーマを整理する方法、それはすべてあなた次第。

 

図4に示すように、プラグイン

// プラグインの 
使用中の一部に配置され.vuepress / config.jsのプラグを行うことができます。
module.exportsは = { 
  プラグイン:[ 
    必要(」./my-plugin.js' 
  ] 
} // 使用から依存プラグ 
vuepress-plugin-のプラグイン:NPMに放出形態のXXXには、このようにそれを使用することができ
module.exportsは = { 
  プラグイン:[ 'vuepress-プラグインXX' ] 
}



 

// 開発プラグ 
プラグインプレーンJavaScriptオブジェクト(#1)をエクスポートする必要があり、プラグイン構成オプションの必要がある場合、それは関数であってもよいが、オブジェクト(#2を返す)、この関数は、プラグイン最初の設定オプションを受け付け2番目のパラメータとしてコンパイル時のオブジェクトコンテキストctxを含むパラメータ。

// #1 
module.exportsは= {
    // ... 
} 

// #2 
module.exportsは=(オプション、CTX)=> {
    リターン{
       // ... 
   } 
} 

// TIP 
VuePressプラグはCommonJSなければなりませんモジュール、VuePressノード端で実行プラグインため。

 

 

 

 

 推奨:https://www.yuque.com/vuepress/vuepress-plugin-yuque/intro

おすすめ

転載: www.cnblogs.com/slightFly/p/12635400.html