环境安装

按官网（）一步步来，先安装vue脚手架：

npm install -g vue-cli

命令行敲vue查看是否安装成功

创建项目

vue init webpack-simple demo

接下来是一些初始化的设置，可以选默认enter下去

cd demonpm installnpm run dev

接下来你会看到这么个页面：

工程目录如下：

打开项目工程，template 写 html，script写 js，style写样式

组件使用

如上工程目录，title-bar.vue是共用的顶部栏，我们在views文件里的list.vue中引用：

组件通信

1. 父组件向子组件通信

在list.vue中的代码如下：

在title-bar.vue子组件中用props接收消息

props: ['titleBar']

2. 子组件向父组件通信

在子组件的js里的代码是这样的：

this.$emit('fromChildMsg', '这是子组件传递的消息');

在父组件接收的代码如下：

配置路由

npm install vue-router --save

然后在main.js里加如下代码：

import VueRouter from 'vue-router'import router from './router'Vue.use(VueRouter);const app = new Vue({  router: new VueRouter(router),  render: h => h(App)}).$mount('#app')

在main.js同级目录下创建个router.js，在这在加入路由配置信息：

export default {    mode: 'history',    base: __dirname,    routes: [        {            path: '/',            redirect: '/home'    //重定向        },        {            path: '/home',            component: require('./views/home.vue')        },        {            path: '/list',            component: require('./views/list.vue')        },        {            path: '/details/:id',    //动态配置            name: 'details',            component: require('./views/details.vue')        }    ]}

App.vue修改成这样：

链接是这样写的

    
     click to enter list page
    

请求数据

npm install vue-resource --save

在main.js中引用并注册

import VueResource from 'vue-resource'Vue.use(VueResource);

在list.vue html中加入列表：

    
    
     
        {
   {article.title}}    
    

在 data 里面加入数组 articles 并赋值为[]，然后在 data 后面加入加入钩子函数 mounted

mounted(){    this.$http.jsonp('https://api.douban.com/v2/movie/in_theaters?count=20').then(res => {        this.articles= res.data.subjects;    });}

ps:

这是豆瓣公开的正在热映电影接口

代码分享

下面是github的源码分享：

demo效果如图

欢迎拍砖！！！