手把手教你用vue-cli2搭建vue项目，elementUI框架。

本篇主要是利用vue-cli来搭建vue项目脚手架，其中前提是node.js和npm( 或cnpm )已经安装好。使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来，文章中的步骤能让你更有顺序的搭建，所以其中的一些步骤说法为了表达正确会进行一定参考。

1.打开cmd ，安装vue-cli，敲入命令：

npm install -g vue
npm install -g @vue/cli （--global：全局安装）

但是这种安装方式比较慢，也可以使用国内镜像来安装，在文章中我使用的npm，需要使用cnpm可以安装淘宝镜像 ：

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看是否安装成功：vue  -V  （V是大写） 出现版本号即为安装成功；

2.生成项目：

vue init webpack Vue-Project 

Vue-Project 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹；

 

配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录（cd Vue-Project），使用 npm（cnpm） 安装依赖

npm install

然后启动项目

npm run dev

 

如果浏览器打开之后（http://localhost:8080），没有加载出页面，有可能是本地的 8080 端口被占用，

需要修改一下配置文件 config > index.js 文件

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

3.安装element-ui

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

找到在项目src目录下的main.js文件中写入element-ui依赖，如下内容： 

然后在vue组件中使用element-ui官网的例子即可。

4、打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后，可以输入 npm run build 来进行打包工作

npm run build

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看

项目上线时，只需要将 dist 文件夹放到服务器就行了。