首页天道酬勤vue全家桶实战 小米,vue文件目录结构

vue全家桶实战 小米,vue文件目录结构

张世龙 05-05 18:33 45次浏览

文章目录序言——一级目录解析一. dist二. node_modules三. public四. src (基础版) 4.1 main.js 4.2 app.vue 4.3 src/assets 4.4 src/components五views6. tests7. git ignore8. readme.md9 . (其他独立的配置信息文件)附件:详细的目录结构树写在最后

前言——一级目录分析

使用Vue CLI 4.0工具创建新项目后,其最基本的一级目录结构如下:

UE-demodist//生成项目后的输出目录node _ modulespublicsrc--tests///选项:查看测试模块.gitignore详细信息- - 了解更多信息-public ——存储公共资源和项目的主门户文件index.html。 查看详细信息-src ——项目核心文件夹:包括项目源、各种静态资源等。 是我们开发的重点工作目录。 查看详细信息-test ——选择安装了测试模块(单元测试/e2e测试)的文件夹。 查看详细信息-查看. -.gitignore —— Git上传时必须忽略的文件目录详细信息-用于-package-lock.json ——版本控制的文件; package.json ——项目的基本配置信息文件。 包括各种插件、依赖项和某些依赖项的详细配置。 如果选择保存到此文件)自述. MD ——项目的描述文件。 查看详细信息.依赖于——配置信息的一些独立文件。 查看详细信息-

dist dist文件夹最初不存在于新项目中。 传统蝴蝶仅在运行一次构建命令(build )后创建。 内部目录结构通常如下:

(VE-demo(dist/(项目生成后的输出目录) (CSS (img (js (index.html/(() (html ) ) ) ) 由于浏览器无法识别,因此为了在实际的生产环境(浏览器)中转换为所需的文件,需要编译打包这一步骤。

npm run build可以自由设置此目录文件夹的名称。 例如,通过Vue UI直接修改:

有关Vue UI的具体使用,请参考上一页。

【Vue家族桶Vue UI (三)使用可视化Vue项目管理器(Vue UI )创建、开发和管理您的项目

node_modules node_modules文件夹包含各种项目相关文件。 这包括许多基本依赖项和自行安装的依赖项。

(UE-demo )node_modules ) .

这就是我们之前很熟悉的原生开发阶段的目录结构。也是浏览器能直接识别的文件类型所以我们拿到Vue项目的时候,通常没有这个文件夹。 必须自己使用命令生成:

npm install现在他将下载项目所需的所有依赖文件。 除了基本的依赖项文件外,他还会识别并逐一安装存储在我们的package.json文件中的依赖项信息。

然后,在项目开发中,可以根据需要继续添加其他依赖关系,并将其保存在node_modules文件夹中。

npm install [依赖软件包名称]

3 .公共虚拟支架和公共文件夹包含项目的公共资源。 例如,网站徽标等还包含项目的主门户文件index.html。 通常,不需要对公共文件夹中的资源进行任何更改。

VUE-demo(public )index.html/项目的主门户文件((……//其他公共资源在生成包时保留在dist文件夹中。 例如:

四.基本版(src ) src文件夹是我们项目的核心文件夹,包括项目源代码和各种静态资源等。 是我们开发的重点工作目录。

如果此时创建了您的项目,但没有选择其他配置,并且这是最简单的空白项目,则您的src文件夹应该如下所示:

(vue-demo(src(assets//静态资源((components//公共组件app.vue//根组件2 )

它们之间具体的调用顺序可以简单概括为下图:
这也是Vue框架最基础的工作原理。后续可以在此基础上继续增添其他的Vue生态产品或插件,比如Vue Router,Vuex或者Element UI组件库等等。

4.1 main.js

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


可以看到这里只导入了两个资源:

Vue框架 —— 从node_modules文件夹中导入;根组件App —— 从App.vue文件导入;

然后新建了一个vue实例:

new Vue({ render: h => h(App), //渲染函数}).$mount('#app') //手动挂载

其中渲染函数render: h => h(App)的格式属于ES6的箭头函数写法,它的ES5等价形式为:

render: h => h(App) || render(h){ return h(App);}

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

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

4.2 App.vue

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

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


App组件就属于根组件,其他组件的使用均需要由App组件直接或间接引入。这里就继续引入了如下两项资源:

图片logo.png —— 位于src / assets目录;公共组件HelloWorld —— 位于src / components目录;

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);

可以看到原生开发中的三剑客html,js,css都整合在了一个组件文件内(麻雀虽小五脏俱全呀)。这样的开发方案无疑与原生开发区别很大,所以才需要最后的构建打包。

我们在运行这个项目后看到的内容,其实是公共组件HelloWorld的内容:


还有一点是这里用到了子父组件传值。根组件App在调用公共组件HelloWorld时,向下传递了一个msg值:


然后HelloWorld公共组件内通过props方法接收,并渲染。


我们可以来尝试修改msg的值和HelloWorld公共组件内的其他内容。比如:

// App.vue<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome ! zevin ."/> </div></template> // HelloWorld.vue<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template>

现在的页面效果就是这样啦~

五. src(顶配版)

刚才讲的基础版src,如果用来理解Vue框架原理是极好的,不过在实际开发中肯定是不够用的。我们或多或少都会用到Vue生态里的其他产品。

所以就有了顶配版的src,哈哈。详细的目录结构如下:

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

对比基础版你会发现,这里又多出了四个文件夹:

plugins —— 插件资源;router —— 路由配置;store —— vuex文件;views —— 视图组件;

对应的文件之间的调用图也该丰富一下了。请看下图:


同样的,main.js文件内容也有区别,import导入的资源项变多了:


而且Vue实例中也增加了相应的内容:

new Vue({ router, // 注册路由 store, // 引入store render: h => h(App)}).$mount('#app')

接下来请继续看这四个文件夹的讲解,来帮助你理解这个图图。

5.1 src / plugins

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

5.2 src / store

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

有关Vuex的详细讲解请看后续更新~

5.3 src / router

单页面应用中,路由是指:根据不同的链接展示不同的页面视图,可以来回切换。如下图所示:

在看src / router文件之前,先来看看根组件App—— App.vue文件的变化:不再直接调用公共组件了,而是引用了< router-view/>路由。

<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div></template>

路由的具体原理是:

根据上边<router-link>标签内to字段的取值,决定了<router-view/>这里具体挂载哪个视图组件。

这种路由链接的对应关系就保存在src/router/index.js文件中。

5.4 src / views

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

Home.vue —— 首页版块;About.vue —— 关于版块;

而在Home.vue中可以看到很熟悉的,和之前基础版中的根组件App.vue相同的模板内容。这样就接上之前基础版的思路啦~


六. tests

选装了测试模块(Unit Testing / E2E Testing)才会有的文件夹。不过我自己对测试没什么研究,也就不班门弄斧了~


七. .gitignore

这个也没什么好说的,也就是无语的蜡烛一下,之后Git上传时,需要忽略的文件。默认的 .gitignore文件内就总结了挺多,不过大家也可以自由的增删改。


八. README.md

README.md文件是你项目的描述文件。可有可无,不影响什么。它的作用就是:

在你上传为Git远程仓库资源时,比如GitHub。他就会解析你项目根目录下的README.md文件,并展示在你仓库目录的下方。方便别人快速了解你的项目。

举个例子:vuepress-theme-vdoing项目的GitHub仓库地址


九. …(其他依赖的独立配置信息文件)

在创建项目时,如果你选择把依赖的配置信息以独立文件形式存放,那么你的项目内,和package.json文件同级的,就还会有比如.browserslistrc, .eslintrc, babel.config.js, jest.config.js, tsconfig.json等独立配置文件。

附:详细目录结构树

我这里是尽可能全的总结了一个Vue项目的实际目录结构。仅供参考,具体的目录结构请以你们的实际为主。

vue-demo├── 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 //入口文件├── tests //选装:测试模块├── .gitignore //Git上传时需要忽略的文件列表├── package-lock.json //版本管理使用的文件├── package.json //项目的基本配置信息文件├── README.md //项目的描述文件├── ... //其他依赖的独立配置信息文件 写在最后

这一篇中,详细整理了一个标准的Vue项目中每一个目录结构的作用。算是对Vue项目的一次大体印象,具体开发细节还得继续深入挖掘。加油!QAQ

每一个不曾起舞的日子,都是对生命的辜负!

—— 尼采

项目管理的九大知识领域,项目管理10大知识领域和47个过程