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的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...
随机推荐
- 07-img和a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue-admin-template模板添加screenfull全屏插件
先安装screenfull:npm install screenfull@4.2.0 --save (注意版本号) 一.在\src\components目录下创建Screenfull文件夹,创建 ...
- List -- 列表的一些操作
1,基本操作 2,内建函数 3,方法Method
- session中load()跟get()的区别
1.相同点:Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象. 2.区别在于: (1)如果未能发现符合条件的记录,get方法返回null,而l ...
- inode学习笔记
在学习文件描述符时会看到有个inode概念,今天学习了一下. 在操作系统里,一个文件对应一个inode,inode存储了该文件相关信息,作用有一点点像内存的指针,通过他可以找到对应位置上的数据,但是i ...
- CCS开发指南
第一章 CCS概述 1 1.1 CCS概述 1 1.2 代码生成工具 3 1.3 CCS集成开发环境 5 1.3.1 编辑源程序 5 1.3.2创建应用程序6 1.3.3 调试应用程序 6 1.4 ...
- webServices学习四（---WebService监听工具）
之前我们使用过HttpWatch获取的HTTP的调用过程,并获得了HTTP的请求头及其他请求的详细信息. 既然WebServie也是通过HTTP进行通信的,能不使用HTTPWatch来获取它的请求过程 ...
- JVM学习-之对象的创建和内存分配
最近看JVM内存模型,看了很多文章,大都讲到JVM将内存区域划分分:Mehtod-Area(No heap) 方法区,Heap(堆)区,Program Counter Register(程序计数器), ...
- 入门servlet：request获取请求体数据
@WebServlet("/RequestDemo5") public class RequestDemo5 extends HttpServlet { protected voi ...
- Leetcode150. Evaluate Reverse Polish Notation逆波兰表达式求值
根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除法只保留整数部分. 给定逆波兰表达式总是有效的.换句话说 ...