使用vue-cli搭建vue项目

建立项目

前提

搭建好NodeJS环境（在cmd窗口执行下面的代码会显示版本）
node -v
npm -v

安装vue-cli

执行命令
npm install -g vue-cli
npm install -g webpack
上面俩个东西下完后会在D盘出现initPath文件,如下

执行下面这个命令会出现版本
vue -V

安装好就可以建立项目了

建立项目

自建立一个文件夹，最好不要有中文路径。在窗口进入该文件夹，执行命令：
vue init webpack xxx
注1：xxx 为自己创建项目的名称

乱码问题

如果看不惯乱码可以先执行该命令再创建项目：chcp 65001
切换回中文：chcp 936

回车之后会出现以下问题，前面的回车就可以了，后面第一个输入Y，后面全部输入n回车就会在建立了

这里需要等上一段时间，等它创建好项目；

npm安装elementUI

安装elementUI

进入项目安装elementUI：
cd proa
npm install element-ui -S

运行项目

运行项目：
npm run dev

HBuilder X配置

直接把项目拉进去复制就可以了

修改端口

之前可以看到是8080的端口，找到这里修改就可以了，避免端口冲突

main.js配置

找到src下面的main.js文件，把以下代码复制到相应位置，下面这个可以借鉴一下，有些没有的就不要管了，只要下面这三行，一定要注意位置！！！

import ElementUI from ‘element-ui’ //新添加1
import ‘element-ui/lib/theme-chalk/index.css’ //新添加2，避免后期打包样式不同，要放在import App from ‘./App’;之前
Vue.use(ElementUI) //新添加3

新建vue文件及配置

在src目录下新建views目录，我们自己建的vue文件就放到这里来，然后新建vue文件就好了，如下：

建好之后要配置
path为空的是运行默认的页面，不用改成我这个

浏览器访问

直接运行项目，在浏览器访问这个端口就可以了

这样项目就搭建成功了！