第一步：配置环境

安装cnpm

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

安装@vue/cli

cnpm install -g @vue/cli

检查版本是否正确

vue –version

使用vue.server和vue.build对*.vue文件进行快速原型开发，需要安装vue serve

cnpm install -g @vue/cli-service-global

新建一个App.vue文件测试安装是否成功：

2

Hello world!

3

在该文件当前路径运行：

vue serve App.vue

打开浏览器输入localhost:8080看到如下画面则运行成功

环境安装到此结束，接下来用一个简单案例来学习vue的单文件组件开发。

第二步：简单案例实战

以一个物品清单为例：

该案例由4个组件构成，分别是：

1. addItem.vue 添加物品

2. item.vue 物品实例

3. items.vue 物品列表

4. changeTitle 改变标题

首先，创建一个项目demo：

vue create demo

项目默认目录如下，启动主页在public， vue源码(包括组件)都存放到src

然后分别编写各组件代码

1. addItem.vue：

  <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-primary"> <i class="fa fa-plus-square-o fa-lg"> </i><span>Add</span></button></span></div> 

2. item.vue：

  <li class="list-group-item"> <div class="checkbox"> <label> <span>{{ item.text }}</span></label></div></li> .removed { color: gray; } .removed span { text-decoration: line-through; } 

3. items.vue：

  <ul class="list-group"> </ul> 

4. changeTitle.vue：

  <div> <em>Change the title here:</em></div>

最后修改App.vue，导入上面的组件：

  <div id="app" class="container"> <h1>{{ title }}</h1><br><div class="footer"> <hr></div></div> 

需要注意的是：每个组件必须只有一个根元素。我这里需要在public/index.html引入bootstrap样式和font-awesome图标字体。

运行程序：

cnpm run serve

最后附上运行截图：