书接上文我们说道，如何利用脚手架（vue-cli）构建一个vue项目，本回书我们一起来学习分析下代码。

回顾下创建后的项目目录：

 
说明：在*.vue文件，template标签里写html代码，且template直接子级只能有一个标签。style标签里写样式，script里面写js代码
a. 页面：index.html

这个没什么好说的就是一个简单的html页面，这里id='app'，是为后面的设置vue作用域有关的。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>datura</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>
b. 文件：Hello.vue
<template>

  <div class="hello">

    <h1>{{ msg }}</h1>  <!-- 这里是展示数据中的  -->

    <h2>Essential Links</h2>

    <ul>

      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>

      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>

      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>

      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>

      <br>

      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>

    </ul>

    <h2>Ecosystem</h2>

    <ul>

      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>

      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>

      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>

      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>

    </ul>

  </div>

</template>

<script>

export default {

  name: 'hello',   /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'   /* 这里是数据，一定记住数据一定要放data中然后用return返回 */

    }

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>   /*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */

h1, h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>
c. 文件：App.vue
<template>

  <div id="app">

    ![](./assets/logo.png)

    <router-view></router-view>   <!--  这里是用来展示路由页面内容的，如果想用跳转就用<router-link to='xxx'></router-link> -->

  </div>

</template>

<script>

export default {

  name: 'app'

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>
d. 文件：main.js

这个js文件是主页面配置的主入口。主要是利用es6的模块化引入模块。

import Vue from 'vue'   /* 这里是引入vue文件 */

import App from './App'  /* 这里是引入同目录下的App.vue模块 */

import router from './router'  /* 这里是引入vue的路由 */

/* eslint-disable no-new */

new Vue({

  el: '#app',  /* 定义作用范围就是index.html里的id为app的范围内 */

  router,    /* 引入路由 */

  template: '<App/>',   /* 给Vue实例初始一个App组件作为template 相当于默认组件 */

  components: { App }  /* 注册引入的组件App.vue */

})
e. 文件：index.js

这个是配置路由的页面

import Vue from 'vue'   /* 引用vue文件 */

import Router from 'vue-router'  /* 引用vue路由模块，并赋值给变量Router */

import Hello from '@/components/Hello'  /* 英文Hello.vue模版，并赋值给变量Hello,这里是“@”相当于“../” */

Vue.use(Router)   /* 使用路由 */

export default new Router({

  routes: [     /* 进行路由配置，规定“/”引入到Hello组件 */

    {

      path: '/',

      name: 'Hello',  /* 这里的name同上，暂时没发现有什么意思 */

      component: Hello   /* 注册Hello组件 */

    }

  ]

})
说明：如果需要增加组件那就在components文件下定义xx.vue文件并编写代码即可，如果需要配置路由就要进行在index.js进行路由“路径”配置，还需要点击跳转就要用到<router-link></router-link>标签了。至于后面的过滤器啊，事件啊，钩子函数，ajax等等之类的和vue1.0差不多就不一一叙述，但是会在用到的时候简单说明一下的。我会用下面大约俩个章节来展示一个简单的“小项目”。

Vue2.0史上最全入坑教程（中）—— 脚手架代码详解的更多相关文章

  1. Vue2.0史上最全入坑教程（下）—— 实战案例

    书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...

  2. Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）

    ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...

  3. 史上最全的maven的pom.xml文件详解（转载）

    此文出处:史上最全的maven的pom.xml文件详解——阿豪聊干货 <project xmlns="http://maven.apache.org/POM/4.0.0" x ...

  4. 新手入门：史上最全Web端即时通讯技术原理详解

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  5. 史上最全的maven的pom.xml文件详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  6. 【史上最全】Hadoop 核心 - HDFS 分布式文件系统详解(上万字建议收藏)

    1. HDFS概述 Hadoop 分布式系统框架中,首要的基础功能就是文件系统,在 Hadoop 中使用 FileSystem 这个抽象类来表示我们的文件系统,这个抽象类下面有很多子实现类,究竟使用哪 ...

  7. 新手入门贴：史上最全Web端即时通讯技术原理详解

    关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述.而 ...

  8. git详细使用教程入门到精通(史上最全的git教程)

    Git是分布式版本控制系统,那么它就没有中央服务器的,每个人的电脑就是一个完整的版本库,这样,工作的时候就不 需要联网了,因为版本都是在自己的电脑上.既然每个人的电脑都有一个完整的版本库,那多个人如何 ...

  9. vue2.0项目实战（4）生命周期和钩子函数详解

    最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...

随机推荐

  1. Axure中表格使用的技巧

    对于新手来说,用Axure做一个表格是一件麻烦的事情.本文教你如何快速学会Axure表格的基础应用. (1)Axure制作基本表格的使用 可以使用“线框图”中的“表格”控件来制作一些简单的表格,同时A ...

  2. 批量插入或更新操作之ON DUPLICATE KEY UPDATE用法

    实际的开发过程中,可能会遇到这样的需求,先判断某一记录是否存在,如果不存在,添加记录,如果存在,则修改数据.在INSERT语句末尾指定ON DUPLICATE KEY UPDATE可以解决这类问题. ...

  3. java基础之DateFormat类

    DateFormat DateFormat类概述 DateFormat 是日期/时间格式化子类的抽象类,它以与语言无关的方式格式化并解析日期或时间. 是抽象类,所以使用其子类SimpleDateFor ...

  4. Java基础知识(数据类型和集合)

    一.数据类型 包装类型 包装类型是对基本数据类型不足之处的补充. 基本数据类型的传递方式是值传递,而包装类型是引用传递,同时提供了很多数据类型间转换的方法. Java1.5 以后可以自动装箱和拆箱 二 ...

  5. 未A，或用水法，或不熟的题

    今天是2017.11.25 1. 用栈实现dfs JZOJ_senior 3467 2. 链表加堆或线段树乱搞 JZOJ_senior 3480 3. 求每个边所在的奇环.偶环 JZOJ_senior ...

  6. iPhone X 底部菜单走光的问题

    刘海的问题.我们一直没有关注.客户反映没有自适应iphone X. 解决方法就是写个head里面添加meta新属性+伪类:after+media screen媒体查询相结合一下.解决问题.供大家参考一 ...

  7. html特殊字符 编码css3 content:"特殊符号"一览

    工作中经常会用到用纯css3美化复选框 <div class="cross"></div> css代码.cross{ width: 20px; height ...

  8. light oj 1079 01背包

    #include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...

  9. 转：LPC2214的PLL与定时器设置

    原地址:http://blog.sina.com.cn/s/blog_4419d72d0100mu7h.html LPC2214的PLL与定时器设置 http://www.dpj365.cn/bbs/ ...

  10. switch的练习

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...