使用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。
沒有留言:
張貼留言