安裝

1.打開終端<strong>ls顯示左右文件夾，<strong>cd workspace/

2.執行<strong>npm i vuepress -g或者<strong>yarn global add vuepress，等待安裝完成

如果安裝報以下錯，是npm安裝權限的問題：

在命令前面加上<strong>sudo：

出現+ [email protected]說明npm中添加了一個新的包[email protected]

新建一個項目文件夾，並完成初始化

在workspace文件夾下新建一個項目文件夾，並且初始化：

<code>// 創建一個目錄 叫 myblogmkdir myblog// 進入這個目錄cd myblog// 初始化項目npm init -y/<code>

創建博客相關目錄

用webstorm打開myblog文件夾，新建一個docs目錄，在docs目錄裡新建.vuepress文件夾，然後在裡面創建config.js文件 用於存放配置信息

<code>module.exports = {  title: '劉陽不吃飯',  description: '做一個有趣的人'}/<code>

更多vuepress配置請參考官網(https://vuepress.vuejs.org/zh/guide/directory-structure.html)

在docs目錄裡面創建一個README.md的文件，輸入內容

<code>---home: trueheroImage: /hero.pngactionText: 快速上手 →actionLink: /zh/guide/features:- title: 簡潔至上  details: 以 Markdown 為中心的項目結構，以最少的配置幫助你專注於寫作。- title: Vue驅動  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題。- title: 高性能  details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作為 SPA 運行。footer: MIT Licensed | Copyright © 2018-present Evan You---/<code> 

運行博客

在package.json裡面添加腳本

<code>"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "dev": "vuepress dev docs",    "build": "vuepress build docs"}/<code>

然後在終端(命令行工具)輸入啟動命令

<code>npm run dev/<code>

如果報錯沒有權限，改成

<code>sudo npm run dev/<code>

結果如下：

現在博客就跑起來了

閱讀更多 劉陽不吃飯 的文章

關鍵字: 初探 腳本語言 HTML