MyException - 我的异常网
当前位置:我的异常网» JavaScript » 了解最基本的Vue项目

了解最基本的Vue项目

www.MyException.Cn  网友分享于:2013-08-16  浏览:0次
理解最基本的Vue项目

上一篇《Vue开发环境搭建及热更新》,我们讲解了vue开发环境的搭建还有一些小问题,接下来我们来讲解一下这个界面是如何形成的。

在开始讲之前,我们先来看看我们上一篇所谓的项目目录里面到底放着什么。

1.index.html文件入口 ;

2.src放置组件和入口文件 ;

3.node_modules为依赖的模块 ;

4.config中配置了路径端口值等;

5.dist是存放打包之后的东西;

6.build中配置了webpack的基本配置、开发环境配置、生产环境配置等。

一、src文件夹

我们先从src文件夹开始说起

我们先进入src,在src目录下输入ls,ls是查看当前目录的命令行。我们发现src文件夹里面有App.vue文件,assets文件夹,components文件夹,main.js文件,还有router文件夹。

看过前一篇推荐的慕课网视频我们就知道,项目的打包需要一个入口文件,那这个入口文件在哪里呢?在build目录下,有一个webpack.base.conf.js文件,里面有这么一段代码。

entry定义的就是入口文件,我们可以看到src目录下的main.js文件就是入口文件。App.vue是主组件,所有组件都是在App.vue下进行切换的。components文件夹就是存放组件的地方,像我们这个项目,里面就只是存放着一个Hello组件(关于vue组件的相关知识,这里推荐一位大神keepfool的博客,有两篇,这里链接的是上篇),assets文件夹存放的是图片,router文件夹存放的是路由(关于vue-router的相关知识,keepfool大神也有相关的文章)。

二、components文件夹

该文件夹下面只有Hello.vue这个文件。一个.vue文件包含三个部分<template><script><stype>。现在的项目基本都用ES6的写法(ES6的优势在于模块化Module,当然这只是其中一个优势,估计以后会慢慢的变ES6为主流),虽然vue的官方文档还是用ES5的语法,但是这种ES6写法慢慢看还是看得懂的。

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',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

1.<template>标签

<template>标签里面有个class为hello的div,在<script>里面的name也为hello,在这里这两者之间没有什么联系,就算把class=“hello”删掉,结果还是一样(可以试试看)。

在ES5中,有一种写法和<template>类似,那就是<script>标签:

<!--HTML-->
<div id="app">
    <my-component></my-component>
</div>
<script type="text/x-template" id="myComponent">
    <div>Hello world</div>
</script>
<!--Js-->
Vue.component('my-component',{template:'#myComponent'})
new Vue({el:'#app'})//挂载到id为app的div上

<script>将<div>Hello world</div>替换到<my-component>的位置。使用<script>标签时,设置type意在告诉浏览器这不是一段js脚本,然后将这个元素的HTML作为模板进行编译。用<template>的写法是这样的

<!--HTML-->
<div id="app">
    <my-component></my-component>
</div>
<template id="myComponent">
    <div>Hello world</div>
</template>
<!--Js-->
Vue.component('my-component',{template:'#myComponent'})
new Vue({el:'#app'})//挂载到id为app的div上

 用起来其实差不多。

2.<script>

组件里面的data,要写为函数的形式

data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }

否则写成以下的形式会出错

data:{
    msg: 'Welcome to Your Vue.js App'
  }

这一点在vue的官网中,data必须是函数小节也有提到。

3.<style>

我们会发现<style>标签里面还有个小东西,叫做scoped,加入这个词有什么作用呢?

在vue组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。

三、App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </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>

在<template>里面,我们发现了一个标签<router-view>,通过我们在网页上的比对,我们可以知道<img>图片下面就是我们刚刚分析得半死的hello组件。那为什么它会变成了<router-view>,这就是路由的作用。在页面上使用<router-view></router-view>标签,它用于渲染匹配的组件。那怎么知道<router-view>代表的就是hello组件。接着下一点就是原因。

四、router文件夹里面的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

 首先它导入了vue模块,引入了vue-router插件,还有components目录下的Hello.vue(此处省略了.vue后缀,效果一样)。从export default开始都是配置使用路由的,当途径为“/”的时候,就显示hello组件(这些语法在keepfool大神的博客都有提到)。我们刚刚打开时候的页面,地址栏显示的地址是http://localhost:8080/#/,后面这个横杠,匹配的就是hello组件,所以前一节<router-view>代表的就是hello组件。在地址栏中,“/”是默认加上去的,也就是说,就算你在输入地址的时候,不给它加上“/”,只有http://localhost:8080/#这样,回车之后也会自动加上。

五、入口文件main.js

前面我们知道了,入口文件是main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

首先导入vue模块,导入App.vue(App.vue已经把components文件夹里面的组件都整合在一起了,所以在入口文件我们导入它就行了),最后是导入router目录下的index.js。如果import xx form ‘一个文件夹’,打包的时候会自动查找文件夹里面的index.js文件。之前我挺纳闷为什么new Vue里面有router这种只有键没有值的写法,其实它相当于router:routers,这个其实我们开头已经导入并赋值给router了。关于template键,其实它的值写成<App></App>也是可以的。

接下来就是组件的挂载,如果一个组件没有挂载,那就相当声明了之后却没有使用它。我们将它挂载到id为app的div上,这个id为app又是在哪里?很简单,就在src同级目录下的index.html文件里。

六、index.html

前一篇文章第八点我们说到,最后打包完生成了一些东西,其中有一个就是app.js

这个app.js就是以main.js 为入口文件打包之后生成的。最后渲染页面的文件,就是导入了app.js 的index.html文件。看到这里相信大家对这个项目有了新的认识,但是有个小问题很多人容易混淆。

七、一个小问题

export default {} 跟 var vm = new Vue({}) 完全不是同一回事,前者是ES6的module中的语法,后者是创建一个vue实例。export的相关问题,大家可以点击一下这个链接

 

文章评论

那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
那些争议最大的编程观点
那些争议最大的编程观点
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
老程序员的下场
老程序员的下场
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
我的丈夫是个程序员
我的丈夫是个程序员
10个调试和排错的小建议
10个调试和排错的小建议
代码女神横空出世
代码女神横空出世
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
中美印日四国程序员比较
中美印日四国程序员比较
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员应该关注的一些事儿
程序员应该关注的一些事儿
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
Java程序员必看电影
Java程序员必看电影
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
漫画:程序员的工作
漫画:程序员的工作
鲜为人知的编程真相
鲜为人知的编程真相
我是如何打败拖延症的
我是如何打败拖延症的
程序员和编码员之间的区别
程序员和编码员之间的区别
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
如何成为一名黑客
如何成为一名黑客
一个程序员的时间管理
一个程序员的时间管理
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
旅行,写作,编程
旅行,写作,编程
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
编程语言是女人
编程语言是女人
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
 程序员的样子
程序员的样子
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有