![00d0b97326238dd44564537bbb7aa580.png](https://img-blog.csdnimg.cn/img_convert/00d0b97326238dd44564537bbb7aa580.png)
HBuilder不仅是一款可以用来开发跨平台APP的工具,也是一款优秀的可以用来开发WEB项目的工具,特别适用于开发Vue-JS项目。 本文主要介绍如何使用HBuilderX来创建、编译、发布一个基于Element-UI的WEB项目。
文章目录
- HBuilderX学习笔记二 开发element-ui项目
- 一、操作步骤
- 二、编译测试运行
- 三、编译发布
一、操作步骤
新建项目:选择element-starter模板:
![26205b47725d943ca6952921c6a050e6.png](https://img-blog.csdnimg.cn/img_convert/26205b47725d943ca6952921c6a050e6.png)
等待下载模板成功。
二、编译测试运行
点运行-运行到终端-npm run dev
![a26b487ea124b707700df7833d6fd391.png](https://img-blog.csdnimg.cn/img_convert/a26b487ea124b707700df7833d6fd391.png)
根据编译提示,可以在浏览器打开测试界面:
![822ced2c531b6933401ed1f51ba8d3e2.png](https://img-blog.csdnimg.cn/img_convert/822ced2c531b6933401ed1f51ba8d3e2.png)
三、编译发布
点 运行-运行到终端-npm run build,这时可能会报错。
![536c483d716257c03355eed2143defc3.png](https://img-blog.csdnimg.cn/img_convert/536c483d716257c03355eed2143defc3.png)
在项目根目录下新建 .babelrc文件,输入以下内容:
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }] ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env"], "plugins": ["istanbul"] } }}
再次运行npm run build,可以成功编译输出到dist文件夹。
![c9d9d05afad49e1d95462f9d711497b4.png](https://img-blog.csdnimg.cn/img_convert/c9d9d05afad49e1d95462f9d711497b4.png)
如果要改变输出位置,可以修改 webpack.config.js下的 output.path值。