1.安装webpack

npm install -g webpack

1

2.安装vue-cli

vue-cli是什么？

vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。

使用步骤：

安装vue-cli：

npm install -g vue-cli

    1

使用vue-cli构建项目

vue init webpack project-name  //创建一个基于webpack模板的名为project-name的项目

    1

目前可用的模板包括：
    browserify –全功能的Browserify + vueify，包括热加载，静态检测，单元测试。
    browserify-simple–一个简易的Browserify + vueify，以便于快速开始。
    webpack–全功能的Webpack + vueify，包括热加载，静态检测，单元测试。
    webpack-simple–一个简易的Webpack + vueify，以便于快速开始。

安装项目依赖

cd project-name    //进入项目目录
npm install        //安装项目依赖
npm run dev        //运行项目

    1
    2
    3

此时在浏览器打开：localhost:8080即可看到欢迎页。

关于webpack和vue-cli的更多使用方法参见官方文档。

但是这个只能在本地跑，要如何在我们自己的服务器上访问呢？此时需要执行

npm run build

    1

搭建开发环境

本来想用vue-cli重新创建项目，试了几次总是出现各种问题，没办法成功。最后在仔细查看 Element-UI 的官方文档的 快速上手 部分的时候发现 饿了么 团队给了一个他们自己的 项目模板 。于是我就用这个模板来尝试了下，结果成功了。所以，如果你不想太折腾的话，建议还是使用官方给的项目模板，可以省很多事。

第一步：安装项目模板

克隆/下载项目模板

将下载的模板放到你项目的根目录下

安装依赖

npm install

    1

运行项目模板

npm run dev

    1

此时在浏览器打开：localhost:8080即可看到欢迎页。

技术分享

项目模板里已经把需要配置的文件都配置好了。

第二步：安装element-ui

第一步，我们成功安装了项目模板，接下来，我们需要安装element-ui到项目下。

npm i element-ui@next -D

1

开始使用

接下来我们就可以参照 Element-UI 的官方文档上手开发了。

例子

我们参照官方的按钮组件使用说明，在项目模板的基础上做一个按钮的例子。其它文件不需要改动，只修改App.vue文件的内容。代码如下：

App.vue

{{ msg }}

<el-button @click.native="startHacking">Let‘s do it

显示默认颜色 成功按钮 警告按钮 危险按钮 信息按钮

hover 显示颜色 成功按钮 警告按钮 危险按钮 信息按钮

效果如下图所示：

技术分享 使用过程中碰到的问题： 1. phantomjs安装失败

由于源的问题，安装phantomjs必须要“搭梯子”，使用内网无法下载。所以解决的方法有两种：

方法一：通过科学上网，然后安装。

方法二：对于不知道怎么“搭梯子”的同学，可以通过更改源来下载，操作方法如下：

npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads

    1

2.打开页面乱码

通过 Element-UI 官方提供的项目模板开发，会发现在浏览器打开页面的时候，中文是乱码的。如下图所示：

技术分享

但html页面中已经设置了

仔细查看该页面所涉及的文件的编码格式的时候，发现引用的App.vue 文件的编码格式是GBK ，所以把该文件编码格式改为UTF-8 即可。

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，整个ui风格简约，很实用，使用demo组件可以快速实现体验交互细节，快速开发

1.安装，推荐npm方式安装

npm i element-ui -S 2.引入

2.1全局引入，会把组件库里所有的组件和css引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

2.2局部引入（推荐） 由于业务的风格跟默认的颜色不一样，我采用了自定义主题，选择色号生成，在线生成工具（https://elementui.github.io/t...）可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用，在vue的入口js里直接引入主题样式element-variables.css

import '@/style/theme/element-variables.scss' import { Message, MessageBox, Loading } from 'element-ui' Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service Vue.prototype.$msgbox = MessageBox Vue.prototype.$alert = MessageBox.alert Vue.prototype.$confirm = MessageBox.confirm Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$message = Message 3.组件使用

3.1像message。messagebox弹窗组件是直接挂载全局，因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox。调用参数为： alert(message, title, options) 或 confirm(message, title, options) 或 prompt(message, title, options) 或 $prompt(message, options)

具体使用：

msgbox

图片描述

3.2 官网提供的dialog组件支持内容区更丰富的写法，dialog弹出一个对话框，适合需要定制性更大的场景。

官网写法：

图片描述

这是最基础的使用，在这个基础上我做了个封装，将取消，确定函数挂在组件回调函数上，并且标题，宽度，显隐值都通过属性传递，可以让父组件引用较少的代码