Vue目录和文件分析

最新推荐文章于 2024-06-20 10:26:21 发布

原创最新推荐文章于 2024-06-20 10:26:21 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #vue实战

本文主要分析Vue项目的入口文件main.js和根组件App.vue。main.js中，通过Vue构造函数创建实例，并指定了挂载元素、组件及模板。App.vue作为根组件，展示了单文件组件的结构，包括template、script和style三部分，借助vue-loader转换为JavaScript模块。

main.js 分析

src/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'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

我们逐行分析下代码：

// 引入 vue.js 的默认值
import Vue from 'vue'
// 引入 App.vue 的默认值
import App from './App'

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

// eslint 配置，允许 new 一个实例后不赋值，我们没有使用 eslint，如果有，则下一行注释不可缺少
/* eslint-disable no-new */
// 创建一个新的 Vue 实例
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

注：import 可以加载其他 JavaScript 文件中，使用 export 命令定义的对外接口。

我们使用 new Vue 创建一个新的 Vue 实例，然后传入一个 选项对象 ，以指定挂载元素、组件、模板等选项，这里用到的选项说明如下：

el：一个在页面上已存在的 DOM 元素，作为 Vue 实例的挂载元素，这里是 '#app'，我们可以从 index.html 找到该元素；
components：包含用到组件的对象，这里是 { App }，App 是从 App.vue 引入的默认值；
template：一个会替换挂载元素的字符串模板，因为我们在 components 定义过 App 组件，所以可以在这里使用 '<App/>'；

这里的选项我们可以先做了解，随着后续不断的学习和使用，你会很容易理解这些概念。

注：{ App } 是 { App: App } 的缩写，ES6（ECMAScript 6）允许在对象中直接写变量，此时的属性名为变量名，属性值为变量的值。

App.vue 分析

src/App.vue 是项目根目录下的组件，即根组件，其代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>Welcome to VuejsCaff.com</h1>
  </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: 200px;
}
</style>

以 .vue 结尾的文件构成了一个单文件组件，它可以由 <template>、<script> 和 <style> 三个部分组成。能使用单文件组件，是因为『webpack』模板中配置了 vue-loader，它是一个 webpack 的加载器，可以将上面的组件转换为 JavaScript 模块