1. 首頁 > 生活百科 > >

Vue進階 press什么意思

知識百科生活經驗

佛語：“贈人玫瑰 ， 手留余香 ?！?若您感覺博文內容與您有益 ， 請點贊并收藏！
敬請關注作者，海量博文持續更新中 。望與各位碼友同學習 ， 共進步！
1.介紹VuePress ,一個全新的基于 vue 的靜態網站生成器，實際上就是一個 vue 的 spa 應用，內置 webpack，可以用來寫文檔 。
VuePress 由兩部分組成：一個以 Vue 驅動的主題系統簡約靜態網站生成工具，和一個為編寫技術文檔而優化的默認主題 。它是為了支持 Vue 子項目的文檔需求而創建的 。
由 VuePress 生成的每個頁面，都具有相應的預渲染靜態 HTML，它能提供出色的加載性能，并且對 SEO 友好 。頁面加載之后，Vue 就會將這些靜態內容接管為完整的單頁面應用程序(SPA) 。當用戶在瀏覽站點時 ， 可以按需加載其他頁面 。
2.VuePress 優點

  • 界面簡潔優雅；
  • 容易上手；
  • 更好的兼容、擴展 Markdown 語法；
  • 響應式布局，PC端、手機端；
  • Google Analytics 集成；
  • 支持 PWA
3.運行原理VuePress 網站實際上是由 Vue, Vue Router 和 webpack 驅動的單頁面應用程序 。如果你以前使用過 Vue，那么在編寫或開發自定義主題時（甚至可以使用 Vue DevTools 來調試你的自定義主題?。?，你會快速融入到熟悉的開發體驗中！
在構建過程中，我們會創建應用程序的服務器渲染版本，并且實際上是通過訪問每個路由，來渲染相應的 HTML 。這種方式受到 Nuxt 的 nuxt generate 命令以及 Gatsby 等其他項目的啟發 。
4.項目搭建4.1 項目結構首先說明一下官方推薦的目錄結構：
Vue進階 press什么意思

文章插圖
4.2 創建項目文件夾可以右鍵手動新建，也可以使用 mkdir 命令新建：
mkdir vuepressBlogDemo全局安裝 VuePress
npm install -g vuepress進入 vuepressBlogDemo 文件夾，初始化項目
使用 npm init 或 npm init -y（默認yes）
npm init -y4.3 創建文件夾和文件在 vuepressBlogDemo 文件夾中創建 docs 文件夾，在 docs 中創建 .vuepress 文件夾，在.vuepress中創建 public 文件夾和 config.js 文件 ， 最終項目結構如下所示：
vuepressBlogDemo
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json
在 config.js 文件中配置網站標題、描述、主題等信息
module.exports = {themeConfig: {nav: [{text: '唐',link: '/tang/'}, {text: '宋',link: '/song/'}, {text: '更多',link: '/more/'}],sidebar: {'/tang/': [['', '簡介'], {title: '代表人物',collapsable: false,children: ['libai/']}],'/song/': [['', '簡介'], {title: '代表人物',collapsable: false,children: ['liqingzhao/']}]}}}其中，/tang/、/song/、’'和libai/等表示當前導航欄或側邊欄點擊所跳轉的路由地址（即相應的.md文件），按照路由創建對應的文件 。
''會顯示為當前目錄下的README.md文件 。
[’’, ‘簡介’]當前側邊欄的title為簡介 。
/tang/表示為tang文件夾下的README.md，/tang表示為tang.md文件 。
可以使用sidebar: auto自動生成側邊欄，采用自定義側邊欄 。
在 package.json 文件里添加兩個啟動命令
"scripts": {"dev": "vuepress dev docs","build": "vuepress build docs"}4.4國際化在config.js中添加locales字段，配置國際化 。
locales: {'/': { // 中文lang: 'zh-CN',title: '詩詞鑒賞',description: '靜態站點 詩詞鑒賞'},'/en/': { // 英文lang: 'en-US', // 將會被設置為 <html> 的 lang 屬性title: 'Appreciation of poetry',description: 'Static Site Appreciation of poetry'}}配置默認主題的導航欄和側邊欄支持國際化，在上述themeConfig中增加locales字段：
themeConfig: {locales: {'/': { // 默認語言，這里為中文nav: [{text: '唐',link: '/tang/'}],sidebar: {// ...}},'/en/': { // 英文nav: [{text: 'Tang',link: '/en/tang/'}],sidebar: {// ...}}}}nav和sidebar和前文字段含義相同 。
相應的也要增加國際化相應的文件夾及文件，整體結構跟原結構一致 ， 如圖：
Vue進階 press什么意思

文章插圖
4.5 項目啟動一切就緒，啟動項目
npm run dev 5.部署上線項目開發完畢后，便可像部署其他前端Vue項目一樣進行項目部署上線，依賴系統只需要通過鏈接形式 ， 訪問該系統上的相關支持文檔 。從而實現小助手功能 。
6.一些小亮點完成了基礎搭建后 ， 就可以在docs目錄下新建 .md 文件寫文章了（.md 是 Markdown 語法文件，需要掌握Markdown 的一些基本寫法 。）
【Vue進階 press什么意思】而且，vuepress支持自定義布局以及自定義主題，并且可以使用很多插件以及自定義插件 。