Vue项目结构分析

最新推荐文章于 2024-05-13 11:14:34 发布

企鹅会游泳

最新推荐文章于 2024-05-13 11:14:34 发布

阅读量202

点赞数 1

分类专栏： 1 文章标签： vue

本文链接：https://blog.csdn.net/xxgxxw/article/details/114583344

版权

1 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue项目结构分析

1.概览

使用 CLI 构建出来的 Vue 项目结构是这样的

在这里插入图片描述

里面我们需要关注的内容如下图，重点需要关注的用小红旗标了，

在这里插入图片描述

其中我们最常修改的部分就是 components 文件夹了，几乎所有需要手动编写的代码都在其中。

接下来我们分析几个文件，目的是理解各个部分是怎么联系到一起的。

2.index.html

首页文件的初始代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>wj-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

就是一个普普通通的 html 文件，让它不平凡的是 <div id="app"></div>，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是，整个项目只有这一个 html 文件，所以这是一个单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。

3.App.vue

上面图上我把这个文件称为“根组件”，因为其它的组件又都包含在这个组件中。

.vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 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>

大家可能注意到了，这里也有一句<div id="app">，但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

<script>标签里的内容即该组件的脚本，也就是 js 代码，export default 是 ES6 的语法，意思是将这个组件整体导出，之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

这个文件最关键的一点其实是第四行，<router-view/>，是一个容器，名字叫“路由视图”，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。

4.main.js

前面我们说 App.vue 里的<div id="app"> 和 index.html里的 <div id="app">没有关系，那么这两个文件是怎么建立联系的呢？让我们来看入口文件 main.js 的代码

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

Vue.config.productionTip = false

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

这里插一嘴，这个 js 文件有的同学可能看着不顺眼，比如没有分号（;），因为是 ES6 的语法，不这么写反而会提示错误，虽说可以把 es-lint 改了或者关了，但我想熟悉一下新的规则也挺好。

最上面 import 了几个模块，其中 vue 模块在 node_modules 中，App 即 App.vue 里定义的组件，router 即 router 文件夹里定义的路由。

Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

在这个 js 文件中，我们创建了一个 Vue 对象（实例），el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标，router 代表该对象包含 Vue Router，并使用项目中定义的路由。components 表示该对象包含的 Vue 组件，template 是用一个字符串模板作为 Vue 实例的标识使用，类似于定义一个 html 标签。

看完了以上三个文件，我想基本上就对前端项目的结构有所了解了。

企鹅会游泳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue项目结构分析

Vue项目结构分析1.概览使用 CLI 构建出来的 Vue 项目结构是这样的里面我们需要关注的内容如下图，重点需要关注的用小红旗标了，其中我们最常修改的部分就是 components 文件夹了，几乎所有需要手动编写的代码都在其中。接下来我们分析几个文件，目的是理解各个部分是怎么联系到一起的。2.index.html首页文件的初始代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-
复制链接

扫一扫