本文章接着上一篇Vue脚手架介绍,总结一下所创建项目的结构。

1.文件结构

通过多个关联文件构成模块化开发环境,最终由webpack工具进行打包合并。

|-项目名称
 |-node_modules # 项目运行所依赖的模块,内容较多,文件较大,
        拷贝项目时一般不拷贝此目录,可通过npm install自动下载安装
 |-public # 项目的静态资源目录,如html、css、js、image等,
             服务器访问的根目录,对外公开的资源
     |-index.html # 默认访问的页面文件
 |-src # 源代码目录 
     |-assets # 静态资源目录,和public目录的作用相同
     |-components # 自定义组件目录
     |-App.vue # 项目的主组件
     |-main.js # 项目的启动文件
 |-.browserslistrc # 项目的浏览器适配版本
 |-.eslintrc.js # eslint配置文件,定义语法校验规则
 |-.gitignore # git配置文件,定义忽略文件列表
 |-babel.config.js # babel配置文件,定义ES语法转换规则
 |-package-lock.json # 对项目的安装模块信息进行本地记录
 |-package.json # node项目的描述文件,定义项目的相关描述信息
 |-README.md # 项目的说明文件,对项目进行说明介绍

2.核心文件详解

Vue模块化项目启动时会自动查找两个核心文件: index.html和 main.js。

其中,index.html是访问应用时默认显示的页面文件,也是Vue项目的容器定义文件。Main.js是项目的启动文件,也是Vue模块化项目的整合入口文件。

/**
 * Main.js使用ES6提供的模块导入导出功能
 */
import 模块名 from 文件路径 // 导入模块,模块名可自定义
import Vue from 'vue' //导入内置模块,直接指定模块名,node_modules目录下查找vue
export default {} // 导出模块,默认导出

App.vue是vue中提供的一种特殊的组件定义文件,这类文件用于描述模块化项目中的组件。App.vue是项目的主组件,其他组件都是在该组件下加载的。

3.单文件组件

以.vue结尾的文件,是Vue.js自定义的一种文件格式,称为单文件组件。一个.vue文件就是一个单独的组件,在文件内封装了该组件相关的html、css和js,实现了对一个组件的封装。​

.vue文件由三部分组成:

<template>
 <!-- html,组件的页面结构 -->
</template>

<script>
 // js,组件的功能配置
</script>

<style>
 /* css,组件的样式 */
</style>

4.其他文件

  • .browserslistrc文件

包含项目的浏览器适配版本。

> 1% #支持使用率超过1%的浏览器
last 2 versions #支持浏览器最近的两个版本
not dead #浏览器存在

下一篇记录默认项目是如何构建的,以及各个模块间的导入导出关系。即项目新建成功时,默认显示的页面是如何构建的。

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