理解最基本的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><style>。现在的项目基本都用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>
<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>标签：

<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="myComponent">
<div>Hello world</div>
</script>

Vue.component('my-component',{template:'#myComponent'})
new Vue({el:'#app'})//挂载到id为app的div上

<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>Hello world</div>
</template>

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文件里。