hbuilderx創建vue-element-ui項目

HBuilder不僅是一款可以用來開發跨平台APP的工具，也是一款優秀的可以用來開發WEB項目的工具，特別適用於開發Vue-JS項目。 本文主要介紹如何使用HBuilderX來創建、編譯、發布一個Element-UI項目。

 

文章目錄

• HBuilderX學習筆記二 開發element-ui項目
• 一、操作步驟
• 二、編譯測試運行
• 三、編譯發布

 

---

一、操作步驟

新建項目：選擇element-starter模板：

等待下載模板成功。

二、編譯測試運行

點運行-運行到終端-npm run dev

根據編譯提示，可以在瀏覽器打開測試界面：

三、編譯發布

點 運行-運行到終端-npm run build，這時可能會報錯。

在項目根目錄下新建 .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文件夾。

如果要改變輸出位置，可以修改 webpack.config.js下的 output.path值。

文章來源：https://blog.csdn.net/xundh/article/details/108508262