使用vue-cli脚手架搭建vue项目

一、下载安装node.js

    官网下载地址：https://nodejs.org/en/

   可以修改安装位置，其他默认一直next就好了

   安装完成，检查是否安装成功

   将国外镜像更改为淘宝镜像，加快npm速度（也可以不改）

二、 安装vue-cli

   官方文档：https://cli.vuejs.org/zh/guide/installation.html

    卸载方法（如果有需要的话 ¯\_(ツ)_/¯ ）

三、创建一个基于webpack模板的vue应用程序

   根据需求创建项目

   自行选择所需配置

   这里创建的是一个vue2项目 

   出现文件夹即成功创建项目 

 出现端口

 在浏览器中打开

结束，一个vue2项目就创建好了，把文件夹直接拖到VS Code、IDEA等软件即可使用。

四、在 HBuilderX中打开项目

    下载HBuilderX

         官方下载网址： https://www.dcloud.io/hbuilderx.html

   解压可直接使用

        官方文档：https://hx.dcloud.net.cn/Tutorial/install/windows

   配置

       在菜单栏中点击：工具 → 设置

        常用配置 → 失去焦点自动保存 （自动保存代码）

        运行配置 → 拉到最底下 → 内置终端 → 填写npm和node的路径

   将刚刚创建的项目导入HBuilderX，项目的目录

   找到package.json加入--open，运行后会自动打开网页

    找到vue.config.js设置打开网页的端口号（也可以不设置）

     运行项目，右键 → 外部命令 → npm run serve

    得到端口号就是运行成功  

    自动打开的网页

    如果自动跳转到错误的ip就需要手动设置端口号