網頁

2020/7/6

建立 VuePress 網站

使用VuePress建立網站的方法如下。

範例環境

  • MacOS

VuePress 的文件都有简体中文版本,其實看官方說明即可。

使用VuePress必須要有Node.js,而官方建議使用Yarn(Node.js套件管理工具)來裝VuePress,所以要先安裝好以上兩個東西。


首先建立一個專案所在的資料夾,例如~/Documents/demo/,然後開啟命令視窗將工作目錄移到新建的目錄位址。

輸入yarn init指令初始化套件管理員。

~Documents/demo$ yarn init
yarn init v1.22.4
question name (demo):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
✨  Done in 10.19s.

然後輸入yarn add -D vuepress下載VuePress套件。

~Documents/demo$ yarn add -D vuepress
yarn add v1.22.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning vuepress > @vuepress/core > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning vuepress > @vuepress/core > webpack-dev-server > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning vuepress > @vuepress/core > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning vuepress > @vuepress/theme-default > docsearch.js > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning vuepress > @vuepress/theme-default > docsearch.js > hogan.js > mkdirp@0.3.0: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
warning vuepress > @vuepress/core > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning vuepress > @vuepress/theme-default > stylus > css-parse > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning vuepress > @vuepress/core > chokidar > braces > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning vuepress > @vuepress/core > chokidar > braces > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
[2/4] 🚚  Fetching packages...
warning url-loader@1.1.2: Invalid bin field for "url-loader".
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 724 new dependencies.
info Direct dependencies
└─ vuepress@1.5.2
info All dependencies
├─ @babel/core@7.10.4
├─ ...
├─ ...
├─ yargs@13.3.2
└─ zepto@1.2.0
✨  Done in 32.20s.

輸入mkdir docs && echo '# Hello VuePress' > docs/README.md建立docs目錄並在下面新增一份名稱為README.md的文件,內容為# Hello VuePress

~Documents/demo$ mkdir docs && echo '# Hello VuePress' > docs/README.md

執行yarn docs:dev指令來啟動VuePress網站。

~Documents/demo$ yarn docs:dev
yarn run v1.22.4
$ vuepress dev docs
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

✔ Client
  Compiled successfully in 6.69s

ℹ 「wds」: Project is running at http://0.0.0.0:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/matt/Documents/demo/docs/.vuepress/public
ℹ 「wds」: 404s will fallback to /index.html
success [17:09:17] Build 3e6748 finished in 6689 ms!
> VuePress dev server listening at http://localhost:8080/

可以看到在本機啟動VuePress網站預設的url路徑為http://localhost:8080/


目錄結構如下。VuePress的標準目錄結構請參考這裡

demo
├─ docs
│  └─ README.md
├─ node_modules
├─ package.json
└─ yarn.lock

參考github


沒有留言:

張貼留言