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

　　代码如下：

[javascript]  view plain  copy

1. import Vue from 'vue' // 导入vue模块  
2. import App from './App' // 导入App.vue，.vue可以省略  
3. import router from './router' // 导入router目录下的index.js文件，省略文件名时，会自动查找index.js  
4.   
5. Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示  
6.   
7. new Vue({ // 实例化Vue对象  
8.   el: '#app', // el用于指定Vue组件被加载到哪个HTML元素中  
9.   router, // 指定路由  
10.   components: { App }, // 指定组件  
11.   template: '<App/>' // 模板默认替换挂载元素。如果replace选项为false，模板将插入挂载元素内。  
12. })  

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

　　3. App.vue

　　代码如下：

[javascript]  view plain  copy

1. <template>  
2.   <div id="app">  
3.     <img src="./assets/logo.png">  
4.     <router-view/>  
5.   </div>  
6. </template>  
7.   
8. <script>  
9. export default {  
10.   name: "App"  
11. };  
12. </script>  
13.   
14. <style>  
15. #app {  
16.   font-family: "Avenir", Helvetica, Arial, sans-serif;  
17.   -webkit-font-smoothing: antialiased;  
18.   -moz-osx-font-smoothing: grayscale;  
19.   text-align: center;  
20.   color: #2c3e50;  
21.   margin-top: 60px;  
22. }  
23. </style>  

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

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

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

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

[javascript]  view plain  copy

1. <template>  
2. <transition name="bounce">  
3.     <div class="toast" :class="{'hidden': !visiable}"> <!-- 使用:[属性名]的方式可以设置动态属性 -->  
4.         <i class="message">{{message}}</i> <!-- 使用{{[表达式]}}的方式可以显示组件的数据 -->  
5.         <i class="icon icon-tuichu" @click="closeToast"></i> <!-- 使用@[事件名]的方式可以指定事件的处理方法，方法定义在脚本中 -->  
6.     </div>  
7. </transition>  
8. </template>  
9.   
10. <script>  
11. export default {  
12.   data() { // data：定义组件的数据，即组件内部的变量，注意这里的格式不是“data: {}”，而是函数“data() {}”  
13.     return {  
14.       message: "提示消息",  
15.       visiable: true  
16.     };  
17.   },  
18.   methods: { // methods：定义组件的方法  
19.     closeToast: function() {  
20.       this.close();  
21.     }  
22.   }  
23. };  
24. </script>  
25.   
26. <style scoped lang="less">  
27. @import url("../assets/css/variable.less");  
28. @import url("../assets/css/public.less");  
29. /* 省略样式表 */  
30. </style>  

　　4. router/index.js

[javascript]  view plain  copy

1. import Vue from 'vue' // 导入vue模块  
2. import Router from 'vue-router' // 导入vue-router模块  
3. import HelloWorld from '@/components/HelloWorld' // 导入组件HelloWorld，@指代src目录  
4.   
5. Vue.use(Router) // 使用路由器组件  
6.   
7. export default new Router({ // 创建一个路由器对象  
8.   routes: [ // routes是一张路由表，将路径与组件映射在一起  
9.     {  
10.       path: '/',  
11.       name: 'HelloWorld',  
12.       component: HelloWorld  
13.     }  
14.   ]  
15. })  

　　二、构建结果

　　运行“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框架中易变动的部分，所以把它独立出来，它的尺寸较小。