Vue cli和Gitbook是兩個(gè)前端開發(fā)中常用的工具，它們能夠提高效率、簡(jiǎn)化開發(fā)流程。本文將介紹如何使用Vue cli來創(chuàng)建Gitbook項(xiàng)目，并講解其中的注意事項(xiàng)。

第一步：安裝Vue cli。

npm install -g vue-cli

第二步：創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目，在項(xiàng)目根目錄下運(yùn)行如下命令:

vue init webpack my-gitbookProject

第三步：選擇使用autoprefixer為css自動(dòng)添加瀏覽器前綴。

npm install autoprefixer --save-dev
npm install postcss-loader --save-dev

在webpack.base.conf.js 中按如下方式修改：

{
 test: /\.css$/,
 use: [
'vue-style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () =>[
require('autoprefixer')({
browsers: ['last 15 versions']
})
]
}
}
 ]
},

第四步：安裝gitbook。

npm install gitbook-cli -g

第五步：安裝gitbook插件。

npm install gitbook-plugin-anchors --save-dev

第六步：在項(xiàng)目根目錄下創(chuàng)建book.json文件，內(nèi)容如下：

{
"title": "My Gitbook",
"description": "This is a gitbook created by vue cli.",
"plugins": [
"anchors"
],
"pluginsConfig": {
"anchors": {
"level": [1, 2, 3]
}
}
}

第七步：生成靜態(tài)網(wǎng)頁，可以通過以下命令啟動(dòng)本地服務(wù)。

gitbook serve

第八步：如果需要生成靜態(tài)文件，可以通過如下命令生成。

gitbook build

第九步：訪問網(wǎng)址 http://localhost:4000，即可查看生成的gitbook。

以上就是使用Vue cli和Gitbook創(chuàng)建項(xiàng)目的基本步驟，希望對(duì)大家能有幫助！