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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>datura</title>
  6.   </head>
  7.   <body>
  8.     <div id="app"></div>
  9.     <!-- built files will be auto injected -->
  10.   </body>
  11. </html>
b. 文件：Hello.vue
  1. <template>
  2.   <div class="hello">
  3.     <h1>{{ msg }}</h1>  <!-- 这里是展示数据中的  -->
  4.     <h2>Essential Links</h2>
  5.     <ul>
  6.       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
  7.       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
  8.       <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
  9.       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
  10.       <br>
  11.       <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
  12.     </ul>
  13.     <h2>Ecosystem</h2>
  14.     <ul>
  15.       <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
  16.       <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
  17.       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
  18.       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
  19.     </ul>
  20.   </div>
  21. </template>
  22. <script>
  23. export default {
  24.   name: 'hello',   /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
  25.   data () {
  26.     return {
  27.       msg: 'Welcome to Your Vue.js App'   /* 这里是数据，一定记住数据一定要放data中然后用return返回 */
  28.     }
  29.   }
  30. }
  31. </script>
  32. <!-- Add "scoped" attribute to limit CSS to this component only -->
  33. <style scoped>   /*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
  34. h1, h2 {
  35.   font-weight: normal;
  36. }
  37. ul {
  38.   list-style-type: none;
  39.   padding: 0;
  40. }
  41. li {
  42.   display: inline-block;
  43.   margin: 0 10px;
  44. }
  45. a {
  46.   color: #42b983;
  47. }
  48. </style>
c. 文件：App.vue
  1. <template>
  2.   <div id="app">
  3.     ![](./assets/logo.png)
  4.     <router-view></router-view>   <!--  这里是用来展示路由页面内容的，如果想用跳转就用<router-link to='xxx'></router-link> -->
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.   name: 'app'
  10. }
  11. </script>
  12. <style>
  13. #app {
  14.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  15.   -webkit-font-smoothing: antialiased;
  16.   -moz-osx-font-smoothing: grayscale;
  17.   text-align: center;
  18.   color: #2c3e50;
  19.   margin-top: 60px;
  20. }
  21. </style>
d. 文件：main.js

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

  1. import Vue from 'vue'   /* 这里是引入vue文件 */
  2. import App from './App'  /* 这里是引入同目录下的App.vue模块 */
  3. import router from './router'  /* 这里是引入vue的路由 */
  5. /* eslint-disable no-new */
  6. new Vue({
  7.   el: '#app',  /* 定义作用范围就是index.html里的id为app的范围内 */
  8.   router,    /* 引入路由 */
  9.   template: '<App/>',   /* 给Vue实例初始一个App组件作为template 相当于默认组件 */
  10.   components: { App }  /* 注册引入的组件App.vue */
  11. })
e. 文件：index.js

这个是配置路由的页面

  1. import Vue from 'vue'   /* 引用vue文件 */
  2. import Router from 'vue-router'  /* 引用vue路由模块，并赋值给变量Router */
  3. import Hello from '@/components/Hello'  /* 英文Hello.vue模版，并赋值给变量Hello,这里是“@”相当于“../” */
  4. Vue.use(Router)   /* 使用路由 */
  5. export default new Router({
  6.   routes: [     /* 进行路由配置，规定“/”引入到Hello组件 */
  7.     {
  8.       path: '/',
  9.       name: 'Hello',  /* 这里的name同上，暂时没发现有什么意思 */
  10.       component: Hello   /* 注册Hello组件 */
  11.     }
  12.   ]
  13. })
说明：如果需要增加组件那就在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. CobaltStrike进阶篇-批量上线

    前言 当获取一台目标服务器权限时,更多是想办法扩大战果,获取目标凭据并横向进行登陆是最快速的拿权方式.但目标所处环境是否可出网,如何利用CobalStrike进行批量上线,正是本文所要讲述的内容. 获 ...

  2. Windows Server 2008 R2 部署服务

    Windows Server 2008 R2 部署服务 部分参考: Windows Server 2008 R2 部署服务 - 马睿的技术博客 - 51CTO技术博客http://marui.blog ...

  3. 菜鸟nginx源码剖析数据结构篇（三） 单向链表 ngx_list_t[转]

    菜鸟nginx源码剖析数据结构篇(三) 单向链表 ngx_list_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csd ...

  4. RESTful API -- rules

    RESTful介绍 REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移”或“表现层状态转化”. 推荐 ...

  5. 阿里云数据库再获学术顶会认可，一文全览VLDB最新亮点

    一年一度的数据库领域顶级会议VLDB 2019于当地时间8月26日-8月30日在洛杉矶圆满落幕.在本届大会上,阿里云数据库产品团队浓墨登场,不仅有多篇论文入选Research Track和Indust ...

  6. select有条件in要按照in中的数据排序

    mybatis中的写法 <select id="selectByIds" resultType="com.hoohui.electronic.util.ExHash ...

  7. 3926: [Zjoi2015]诸神眷顾的幻想乡

    传送门 一个广义后缀自动机模板. //Achen #include<algorithm> #include<iostream> #include<cstring> ...

  8. 什么情况下要加上【javascript：】

    你知道http:// https:// mailto: tencent://这种东西么?这叫url schema,通常是在a的href里的.但a的href里面是不能加脚本的,所以浏览器就创造了一个叫j ...

  9. Vue 提示框组件

    OK,首先看看效果: 一.子组件(alert.vue) <template> <transition name="alert"> <div class ...

  10. Python - 集合与元素之集合定义和基本操作方法

    集合(set) 定义:由不同元素组成的集合,集合中是一组无序排列可hash的值(不可变的值)例如数字.字符串.元组,可以作为字典的key 定义集合: # 定义集合 s = {1, 2, 3, 3, 3 ...