Vue2.0史上最全入坑教程（中）—— 脚手架代码详解
书接上文我们说道，如何利用脚手架（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">
<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史上最全入坑教程（中）—— 脚手架代码详解的更多相关文章
- Vue2.0史上最全入坑教程（下）—— 实战案例
书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...
- Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）
ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...
- 史上最全的maven的pom.xml文件详解（转载）
此文出处:史上最全的maven的pom.xml文件详解——阿豪聊干货 <project xmlns="http://maven.apache.org/POM/4.0.0" x ...
- 新手入门：史上最全Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- 史上最全的maven的pom.xml文件详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 【史上最全】Hadoop 核心 - HDFS 分布式文件系统详解(上万字建议收藏)
1. HDFS概述 Hadoop 分布式系统框架中,首要的基础功能就是文件系统,在 Hadoop 中使用 FileSystem 这个抽象类来表示我们的文件系统,这个抽象类下面有很多子实现类,究竟使用哪 ...
- 新手入门贴：史上最全Web端即时通讯技术原理详解
关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述.而 ...
- git详细使用教程入门到精通(史上最全的git教程)
Git是分布式版本控制系统,那么它就没有中央服务器的,每个人的电脑就是一个完整的版本库,这样,工作的时候就不 需要联网了,因为版本都是在自己的电脑上.既然每个人的电脑都有一个完整的版本库,那多个人如何 ...
- vue2.0项目实战（4）生命周期和钩子函数详解
最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...
随机推荐
- EF 中获取 TableAttribute的值，即数据库中真实的表名
比如EF中我定义了这样一个实体: [Table(Name = "MyTableName")] public class MyClass { } [Table(Name = &quo ...
- 信息安全-浏览器-CORS：CORS（跨域资源共享）
ylbtech-信息安全-浏览器-CORS:CORS(跨域资源共享) 1.返回顶部 1. CORS,全称Cross-Origin Resource Sharing,是一种允许当前域(domain)的资 ...
- 杂项-公司：SAMSUNG
ylbtech-杂项-公司:SAMSUNG 三星集团是韩国最大的跨国企业集团,同时也是上市企业全球500强,三星集团包括众多的国际下属企业,旗下子公司有:三星电子.三星物产.三星航空.三星人寿保险等, ...
- 让html里的js脚本延迟5秒运行
setTimeout( function(){ //add your code}, 5 * 1000 );//延迟5000毫米
- nfs 原理详解
一.NFS介绍 1)什么是NFS 它的主要功能是通过网络让不同的机器系统之间可以彼此共享文件和目录.NFS服务器可以允许NFS客户端将远端NFS服务器端的共享目录挂载到本地的NFS客户端中.在本地的N ...
- Odoo 新 API 概述
__all__ = [ 'Environment', 'Meta', 'guess', 'noguess', 'model', 'multi', 'one', 'cr', 'cr_context', ...
- Android App的设计架构：MVC,MVP,MVVM与架构AAAAA
1. 架构设计的目的1.1 通过设计使程序模块化,做到模块内部的高聚合和模块之间的低耦合.1.2 这样做的好处是使得程序在开发的过程中,开发人员只需要专注于一点,提高程序开发的效率,并且更容易进行后续 ...
- DVWA 之low级别sql注入
将Security level设为low,在左侧列表中选择“SQL Injection”,然后在右侧的“User ID”文本框中输入不同的数字就会显示相应的用户信息. 我们首先需要判断这里所传输的参数 ...
- 第三方博客同步xmlrpc、rest、API等相关的文章网址记录
http://answers.microsoft.com/en-us/windowslive/forum/writer-wlsettings/i-am-encountering-a-problem-s ...
- MyBatis框架的文件配置
第一步:log4j.properties的配置 原因:Mybatis的日志输出是依赖与log4j的,所以必须要配置 # Global logging configuration log4j.rootL ...