Hbuilder是一個(gè)全能型的前端開(kāi)發(fā)工具，它不僅可以支持自動(dòng)化構(gòu)建，還可以有很好的代碼提示和調(diào)試。對(duì)于Vue開(kāi)發(fā)者來(lái)說(shuō)，Hbuilder是一個(gè)很好的選擇，可以方便我們完成Vue項(xiàng)目的開(kāi)發(fā)。

在使用Hbuilder開(kāi)發(fā)Vue項(xiàng)目時(shí)，首先我們需要在Hbuilder中創(chuàng)建一個(gè)Vue項(xiàng)目，具體操作可以這樣：

選擇菜單File -> New -> Project，然后選擇Vue.js進(jìn)行創(chuàng)建即可。

創(chuàng)建Vue項(xiàng)目之后，我們需要添加Vue項(xiàng)目相關(guān)的插件，使用npm或yarn進(jìn)行安裝，具體操作可以在項(xiàng)目根目錄下運(yùn)行以下命令：

npm install (yarn)

安裝完成后，我們需要在Hbuilder中添加一個(gè)webpack配置文件，具體操作如下：

選擇菜單File -> New -> File，然后命名為webpack.config.js。
然后將以下代碼復(fù)制粘貼進(jìn)去即可：

const path = require('path')
module.exports = {
mode: 'development',
output: {
path: path.join(__dirname, 'dist'),
publicPath: 'dist/',
filename: 'build.js'
},
entry: './src/index.js',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[extension]?[hash]'
}
}
]
}
}

代碼中采用的是webpack4+Vue2的配置，可以根據(jù)自己的需求進(jìn)行修改。

接下來(lái)我們需要配置Hbuilder的運(yùn)行環(huán)境，這里我們選擇使用Webpack DevServer來(lái)進(jìn)行開(kāi)發(fā)。具體操作如下：

選擇菜單Project -> Properties -> Running Configuration，在Server Tab中選擇Webpack DevServer，并且設(shè)置端口和根目錄，同時(shí)設(shè)置Entry HTML等相關(guān)選項(xiàng)。
在webpack.config.js中添加如下代碼：

devServer: {
port: 8080,
contentBase: './dist',
historyApiFallback: true
}

最后，我們就可以在Hbuilder中愉快地進(jìn)行Vue項(xiàng)目開(kāi)發(fā)了！