Vue入门（二）

Vue入门（二）

　　这一节我们将通过阅读Demo项目的源代码，了解Vue项目的基本构成。

　　只有了解了这些，我们才有能力编写自己的案例。

　　之后我们通过命令“npm run build”，构建Vue项目，观察生成的构建结果，更深入地了解项目。

　　一、Vue项目的基本构成

　　1. src目录

　　开发者编写的代码都放在src目录下。

　　Demo项目的src目录结构如下图所示：

　　各文件和目录说明如下：

• main.js文件：App首页的主要文件，根目录下的index.html文件只是一个空壳，其内容都由这个JS文件动态填充生成。
• App.vue文件：App首页的主要文件，App组件是整个App中最重要的一个组件，或者说是根组件，由main.js负责渲染，并填充入index.html中。
• assets目录：存放资源文件，如样式表、图片、音频、视频等。
• components目录：存放其它组件。
• router目录：存放路由配置。

　　2. main.js

　　代码如下：

import Vue from 'vue' // 导入vue模块
import App from './App' // 导入App.vue，.vue可以省略
import router from './router' // 导入router目录下的index.js文件，省略文件名时，会自动查找index.js

Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示

new Vue({ // 实例化Vue对象
  el: '#app', // el用于指定Vue组件被加载到哪个HTML元素中
  router, // 指定路由
  components: { App }, // 指定组件
  template: '<App/>' // 模板默认替换挂载元素。如果replace选项为false，模板将插入挂载元素内。
})

　　new Vue()时，会把components中指定的组件渲染出来，并填充入el指定的HTML元素中。

　　3. App.vue

　　代码如下：

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

　　一个组件是实现特定功能的可复用的页面模块，例如手机中常见的通讯录，就是一个组件。

　　一个Vue组件由三部分构成：

• template：模板。模板部分包含组件的HTML代码。
• script：脚本。脚本部分定义组件类的数据和操作。
• style：样式表。样式表部分定义组件的CSS代码。

　　这里有一个手机中弹出提示（Toast）的组件代码，大家可以看一下：

<template>
<transition name="bounce">
    <div class="toast" :class="{'hidden': !visiable}"> <!-- 使用:[属性名]的方式可以设置动态属性 -->
        <i class="message">{{message}}</i> <!-- 使用{{[表达式]}}的方式可以显示组件的数据 -->
        <i class="icon icon-tuichu" @click="closeToast"></i> <!-- 使用@[事件名]的方式可以指定事件的处理方法，方法定义在脚本中 -->
    </div>
</transition>
</template>

<script>
export default {
  data() { // data：定义组件的数据，即组件内部的变量，注意这里的格式不是“data: {}”，而是函数“data() {}”
    return {
      message: "提示消息",
      visiable: true
    };
  },
  methods: { // methods：定义组件的方法
    closeToast: function() {
      this.close();
    }
  }
};
</script>

<style scoped lang="less">
@import url("../assets/css/variable.less");
@import url("../assets/css/public.less");
/* 省略样式表 */
</style>

　　4. router/index.js

import Vue from 'vue' // 导入vue模块
import Router from 'vue-router' // 导入vue-router模块
import HelloWorld from '@/components/HelloWorld' // 导入组件HelloWorld，@指代src目录

Vue.use(Router) // 使用路由器组件

export default new Router({ // 创建一个路由器对象
  routes: [ // routes是一张路由表，将路径与组件映射在一起
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

　　二、构建结果

　　运行“npm run build”，观察dist目录下的构建结果。

　　1. 构建完成后，就看不到.vue文件了，只有img、css、js等几个目录了。

　　2. 以组件为单位生成相应的.css和.js文件，例如App.vue，就生成了app.[随机字符].css和app.[随机字符].js。

　　3. Webpack会把较小的图片编码成BASE64编码，直接写入.js文件中。

　　4. .js文件是经过压缩处理的，比原来的尺寸小了很多。

　　由于.js文件经过了压缩处理，所以如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。因此还为每个文件生成了一个map文件，有了map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错了。

　　如果你不想生成map文件，可以找到src/config/index.js文件，并将productionSourceMap改为false。

　　5. Vue框架也生成了两个.js文件，一个是vendor.[随机字符].js，一个是manifest.[随机字符].js。可以认为vendor是Vue框架的主体部分，它的尺寸较大，而manifest是Vue框架中易变动的部分，所以把它独立出来，它的尺寸较小。