您的位置: 首页  >  文章  >  Vue入门（二）

Vue入门（二）

分类: 文章 • 2025-01-07 20:11:10

Vue入门（二）

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

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

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


　　一、Vue项目的基本构成


　　1. src目录

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

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

Vue入门（二）

　　各文件和目录说明如下：

  • 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目录下的构建结果。


Vue入门（二）


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

相关推荐