Vue学习——使用Hbuilder创建并运行Vue项目

步骤一：进入Hbuilder并点击左上角文件，选择新建→项目

步骤二：选择vue项目后点击创建按钮，就创建成功啦！

步骤三：运行刚刚创建的vue项目

①选择刚刚创建的项目，并点击右键

②进入外部命令，点击npm run build

步骤四：再次进入外部命令，这次点击npm run server

等待页面下方正在跑终端-外端命令的窗口中出现如下图所示的地址即为运行成功！

再复制下面任一地址到浏览器访问就可以啦！！！

注意：由于各种原因（win10\win7等系统版本跑node.js时，由于node.js也有好多版本，所以可能会出现五花八门的问题），下面仅列出我在运行时碰到的问题供参考。

我在跑完npm run build和npm run server这两个命令后，报错：

Error: error:0308010C:digital envelope routines::unsupported

（出现这个问题可能是因为在没运行之前我升级了一下HBuilder X）

个人全网各种搜集后得出目前最优的解决办法：（亲测有效，但可能每次新建一个vue项目都要重复该操作，所以不算完全解决但能解燃眉之急，后期有别的方法会更新）

①直接在这个vue项目中的package.json增加配置，把命令（&&前）写到启动项目的配置里面
"scripts": {
    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  },

②再重复依次点击运行npm run build和npm run server这两个命令后即可！