开发环境
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
搭建开发环境
第一步：安装项目模板
克隆/下载项目模板
将下载的模板放到你项目的根目录下
安装依赖
npm
install
1
运行项目模板
npm
run dev
1
此时在浏览器打开：localhost:8080即可看到欢迎页。
项目模板里已经把需要配置的文件都配置好了。
第二步：安装element-ui
第一步，我们成功安装了项目模板，接下来，我们需要安装element-ui到项目下。
npm
i element-ui
@next
-D
1
开始使用
例子
我们参照官方的按钮组件使用说明，在项目模板的基础上做一个按钮的例子。其它文件不需要改动，只修改App.vue文件的内容。代码如下：
App.vue
<template>
<
div
id
=
"app"
>
<
img
src
=
"./assets/logo.png"
>
<
h1
>
{{ msg }}
</
h1
>
<
el-button
@
click.native
=
"startHacking"
>
Let's do it
</
el-button
>
<
div
class
=
"block"
>
<
span
class
=
"demonstration"
>
显示默认颜色
</
span
>
<
span
class
=
"wrapper"
>
<
el-button
type
=
"success"
>
成功按钮
</
el-button
>
<
el-button
type
=
"warning"
>
警告按钮
</
el-button
>
<
el-button
type
=
"danger"
>
危险按钮
</
el-button
>
<
el-button
type
=
"info"
>
信息按钮
</
el-button
>
</
span
>
</
div
>
<
br
/>
<
div
class
=
"block"
>
<
span
class
=
"demonstration"
>
hover 显示颜色
</
span
>
<
span
class
=
"wrapper"
>
<
el-button
:plain
=
"true"
type
=
"success"
>
成功按钮
</
el-button
>
<
el-button
:plain
=
"true"
type
=
"warning"
>
警告按钮
</
el-button
>
<
el-button
:plain
=
"true"
type
=
"danger"
>
危险按钮
</
el-button
>
<
el-button
:plain
=
"true"
type
=
"info"
>
信息按钮
</
el-button
>
</
span
>
</
div
>
</
div
>
</
template
>
<
script
>
export
default
{
data () {
return
{
msg:
'Use Vue 2.0 Today!'
}
},
methods: {
startHacking () {
this
.$notify({
title:
'It Works'
,
message:
'We have laid the groundwork for you. Now it\'s your time to build something epic!'
,
duration:
6000
})
}
}
}
</
script
>
<
style
>
body
{
font-family
:
Helvetica, sans-serif
;
}
</
style
>
使用过程中碰到的问题：
1. phantomjs安装失败
由于源的问题，安装phantomjs必须要“搭梯子”，使用内网无法下载。所以解决的方法有两种：
方法一：通过科学上网，然后安装。
方法二：对于不知道怎么“搭梯子”的同学，可以通过更改源来下载，操作方法如下：
1
2.打开页面乱码
通过
Element-UI
官方提供的项目模板开发，会发现在浏览器打开页面的时候，中文是乱码的。如下图所示：
但
html
页面中已经设置了
<meta chartset='utf-8'>
。
仔细查看该页面所涉及的文件的编码格式的时候，发现引用的
App.vue
文件的编码格式是
GBK
，所以把该文件编码格式改为
UTF-8
即可。