Vue项目的详细目录结构解析 vue-cli

详细目录结构树

使用Vue CLI 5.0工具创建出一个新的项目

vue_basic

├── dist  //项目构建后的输出目录
├── node_modules
│   └── ...  // 各类依赖
├── public
│   └── index.html  // 项目主入口文件
│   └── ...  // 其他公共资源
├── src
│   └── assets  //静态资源
│       └── logo.png
│   └── components  //公共组件
│       └── HelloWorld.vue
│   └── plugins  //插件资源
│       └── axios.js
│   └── router  //路由配置
│       └── index.js
│   └── store  //vuex文件
│       └── index.js
│   └── views  //视图组件
│       └── About.vue
│       └── Home.vue
│   └── App.vue  //根组件
│   └── main.js  //入口文件
├── .gitignore  //Git上传时需要忽略的文件列表
├── babel.config.js //  js 编译器，兼容低版本的 es 语法
├── vue.config.js   // webpack的基本配置
├── jsconfig.json   //表明该目录是 TypeScript 项目的根目录
├── package.json  //项目的基本配置信息文件
├── package-lock.json  //版本管理使用的文件
├── README.md  //项目的描述文件
├──.browserlistrc  //Browserslist 是一个前端项目配置工具，功能是在前端工具之间共享目标环境的浏览器信息。
├── ...  //其他依赖的独立配置信息文件

一. dist

dist文件夹在新建项目中一开始并不会存在。只有当你执行过一次构建命令（build）后，才会创建。通常它的内部目录结构为：

├── dist  //项目构建后的输出目录
│   └── css
│   └── img
│   └── js
│   └── index.html  // 项目主入口文件
│   └── ...  // 其他公共资源

二. node_modules

node_modules文件夹中存放的是各种项目依赖文件，其中包括很多基础依赖和自己安装的依赖。

├── node_modules
│   └── ...

一般 在做代码共享或者上传远程仓库时，会忽略此文件夹。
所以我们在拿到一个Vue项目时，一般都是没有这个文件夹的。需要我们自己使用命令去生成：

npm install

这样就会去下载项目所需的所有依赖文件。除了基础的依赖文件之外，它还会去识别我们package.json文件中保存的依赖信息并逐一安装。

之后项目开发中，我们也可以根据需要继续增添其他依赖，仍然会保存在node_modules文件夹中。

npm install [依赖包名称]

三. public

顾名思义，public文件夹中存放的是项目公共资源。比如网站LOGO等，还会有项目的主入口文件index.html。通常我们不需要对public文件夹内的资源做任何修改。

├── public
│   └── index.html  // 项目主入口文件
│   └── ...  // 其他公共资源

后续在构建打包时，public文件内容会直接放到dist文件夹内；

四. src（）

src文件夹是我们项目的核心文件夹：包括项目源码以及各种静态资源等等。是我们开发的重点工作目录。

src文件夹应该是这样的：

├── src
│   └── assets  //静态资源
│   └── components  //公共组件
│   └── plugins  //插件资源
│   └── router  //路由配置
│   └── store  //vuex文件
│   └── views  //视图组件
│   └── App.vue  //根组件
│   └── main.js  //入口文件

文件之间的调用

4.1 main.js

main.js文件是一个很重要的文件，是浏览器解析最先加载的入口文件。这个文件的主要功能是通过import的方式导入各种资源，然后新建了一个vue实例。

// 导入了资源
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// 新建了一个vue实例
new Vue({
  router,
  store,
  render: h => h(App)  //渲染函数
}).$mount('#app')   //手动挂载

其中渲染函数render: h => h(App)的格式属于ES6的箭头函数写法:

render: function (createElement) {
    return createElement(App);
}

进一步缩写为(ES6 语法)：

render (createElement) {
    return createElement(App);
}

按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);

createElement 为什么简写成了 h ?
根据 Vue.js 作者 Even You 的回复，h 的含义如下：

It comes from the term “hyperscript”, which is commonly used in many virtual-dom implementations. “Hyperscript” itself stands for “script that generates HTML structures” because HTML is the acronym for “hyper-text markup language”.

它来自单词 hyperscript，这个单词通常用在 virtual-dom 的实现中。
Hyperscript 本身是指生成HTML 结构的 script 脚本，因为 HTML 是 hyper-text markup language 的缩写（超文本标记语言）

createElement 函数是用来生成 HTML DOM 元素的，也就是 Hyperscript，这样作者才把 createElement 简写成 h。

该Vue实例中通过h函数渲染根组件App，并把他手动挂载到id为#app的节点上。该节点位于public目录下的主入口文件index.html中。

其中< div id=“app”>将会被根组件App替换掉，即所谓的挂载。

4.2 App.vue

所以进一步加载的是根组件App文件 —— App.vue。之前我们在讲Vue框架入门的时候，说到Vue框架中有一个很重要的核心理念：

组件化开发 —— 每一个Vue页面都可以看作是由组件填充而成的，组件之间支持层级嵌套。

App组件就属于根组件，其他组件的使用均需要由App组件直接或间接引入。

4.3 src / assets

src / assets 文件夹内保存的是各种静态资源，比如css、img、js、font等。新建项目的assets文件夹内就只有一张首页上的LOGO图片资源;

4.4 src / components

这里定义的组件都属于公共组件，任意的Vue页面中都可以（多次）调用。后缀为.vue的文件即为组件文件，每一个vue组件通常都由以下三部分组成：

<template>标签 —— HTML模板代码片段；
<script>标签 —— javascript代码；
<style>标签 —— 样式代码（原生CSS / 预处理语言Sass，Less，Stylus）；

4.5 src / plugins

这个文件夹是你项目开发过程中，手动安装过插件而产生的。比如安装了axios插件；

4.6 src / store

store文件夹是你选配了Vuex之后才会有的文件，主要用于项目内某些状态的保存。比如state、mutations、actions、getters、modules等。

4.7 src / router

在单页面应用中，路由是指：根据不同的链接展示不同的页面视图，可以来回切换

4.8 src / views

src / views文件夹内存放的是视图组件。选配了Vue Router的新建项目，都会默认有以下两个视图组件：

• Home.vue —— 首页版块；
• About.vue —— 关于版块；