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的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...
随机推荐
- mysql emoji存储问题
偶然存储一条用户记录的时候,发现mysql一直报错 mysql_real_query failed:Incorrect stringvalue: '\xF0\x9F\x98\x8E T...' for ...
- MVC中视图访问的约定
通常访问视图的时候,都会去选择访问Views文件夹内对应于Controller同名的文件夹下的某一个视图,这个视图对应于这个Controller类的某一个方法. 其实,也可以让这个方法对应于不同名的c ...
- NFS和mount常用参数详解 本文目录
NFS和mount常用参数详解 本文目录 NFS权限参数配置 mount挂载参数 原始驱动程序的挂载选项. 新驱动程序的挂载选项. 怎样改变已经挂载的NTFS卷的权限? 怎样自动挂载一个NTFS卷 ...
- mysql InnoDB: Assertion failure in thread xxxx in file ut0mem.cc line 105
mysql InnoDB: Assertion failure in thread xxxx in file ut0mem.cc line 105 错误信息 InnoDB: Assertion fai ...
- [转]一分钟明白 VS manifest 原理
什么是vs 程序的manifest文件 manifest 是VS程序用来标明所依赖的side-by-side组建,如ATL, CRT等的清单. 为什么要有manifest文件 一台pc上,用一组建往往 ...
- Java发送http请求发送json对象
直接上代码: http工具类: public static String httpPostWithjson(String url, String json) throws IOException { ...
- Django项目：CRM(客户关系管理系统)--69--59PerfectCRM实现king_admin行内编辑
#base_admin.py # ————————24PerfectCRM实现King_admin自定义操作数据———————— from django.shortcuts import render ...
- Nginx 的常用命令
nginx命令,先来一波基本操作: start nginx // 启动Nginx nginx -t // 测试配置文件 nginx -v // 查看Nginx版本 nginx -V // 查看Ngin ...
- AdaBoost笔记之代码
最近要做二分类问题,先Mark一下知识点和代码,参考:Opencv2.4.9源码分析——Boosting 以下内容全部转自此文 一 原理 二 opencv源码 1.先看构建Boosting的参数: ...
- volatile和指令重排序
volatile 的作用 1 精致指令重排序 2 多线程访问同一个变量的时候,每次都是取最新的,而不会使用当前cpu缓存的那一份.