在项目创建成功并启动时,网页会显示如下的内容。(详见系列文章第一篇)

原始项目的目录结构如下所示。

当项目创建成功并启动时,项目的入口是src文件夹里的main.js文件。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
 render: h => h(App),
}).$mount('#app')

前两行代码用于从其他地方导入模块,语法:import  模块名  from  文件路径,其中,模块名可自己定义。与第二行模块导入代码不同,Vue的导入路径直接写了vue。这是导入了项目的内置模块,这些模块包含在node_modules文件夹中。vue是node_modules中的文件夹名,程序执行到该行代码后会直接去node_modules/vue文件夹中找其中的package.json或index.html文件,若两个文件都存在,则优先找package.json。紧接着寻找package.json里的“main”配置项,执行相关代码。

new Vue代码表示新建一个Vue实例,里面包含渲染函数render,并将实例挂载到#app。其中,渲染函数使用了ES6新特性里的箭头函数形式。等价于下面的形式:

new Vue({
 render: function(createElement){
     createElement(App);
 },
}).$mount('#app')

上述Vue实例创建中涉及的App就是从./App.vue导入时所自定义的组件名称。挂载的’#app’是项目public文件夹下的index.html文件中定义的容器。如果接着看App.vue的代码,会发现所定义模板中的根标签id也为app,此时可能会将上面挂载时写的’#app’误以为是此处的,其实不是。

可以简单地通过修改App.vue里的根标签id为其他名字得到验证。App.vue文件中的内容如下:

<template>
  <div id="app">
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
      <!-- 空标签可以简写 -->
      <!-- <HelloWorld></HelloWorld>可以写成<HelloWorld/> --> 
 </div>
</template>

<script>
 // 导入组件
 import HelloWorld from './components/HelloWorld.vue'

 // 使用ES6提供的模块导出功能,导出对组件的配置选项
 // 在单文件组件文件中,不需要指定具体的模板名,即template: #app
 export default {
   name: 'App',

   // 注册组件HelloWorld
   components: {
      HelloWorld
   }
}
</script>

<style lang="less">
#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、script、css三个部分。id为#app的组件包括一个图片和一个HelloWorld子组件。其中,HelloWorld子组件是从其他路径中导入该文件。export代码定义该app模块(.vue文件)被其他模块引用时的选项内容。

注:此处的App并不是main.js导入App.vue时指定的名称App,二者可以不一致。如果将name这行注释掉,不影响运行结果。

除此之外,export代码还包含了对导入的模块HelloWorld的注册。最后的css部分定义了#app的样式。

其中涉及的HelloWorld组件同样由一个.vue文件定义。不再详细展开介绍,里面涉及到父子组件间的数据传递问题。父组件中的数据“Welcome to Your Vue.js App”通过属性绑定的方式,传递给了子组件HelloWorld的msg数据变量。在子组件HelloWorld的export选项中,以数据拦截props的方式接收数据,类型type为string。

总结:

    main.js文件是整个项目的入口,从node_modules中导入了内置模块vue以及其他组件App.vue(可自定义),实例化vue对象后挂载到index.html中定义的#app容器上。其中,#app(非前面的容器app)作为父组件,包含一个子组件HelloWorld,该组件文件被从其他路径下导入。总的来说,一个.vue文件就是一个单文件组件,可以被导入到其他组件文件中。此外,若某组件文件导入了其他组件,需要在export选项中进行组件的注册。

说点什么
欢迎骚扰,有缘人互加友链
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...