vue项目结构php写哪里,Vue-cli搭建项目后目录结构的分析(图文)

本文详细介绍了Vue-cli创建的项目目录结构,包括build、config、src、static、test等文件夹的功能和作用,以及关键文件如webpack配置、入口文件、组件、路由等的解析。同时,提到了ES6语法编译配置、代码规范和测试相关设置。
摘要由CSDN通过智能技术生成

这篇文章给大家介绍的文章内容是关于Vue-cli搭建项目后目录结构的分析,有很好的参考价值,希望可以帮助到有需要的朋友。

1.前言

Vue并不限制你的代码结构。但是,它规定了一些需要遵守的规则:

1、应用层级的状态应该集中到单个store对象中。

2、提交mutation是更改状态的唯一方法,并且这个过程是同步的。

3、异步逻辑都应该封装到action里面。

2.项目文件目录显示如下

91574f02eeca40bc75533af45e456fff.png

3.项目文件解析

3.1 build文件

build:文件夹下存放webpack的一些配置,webpack是前端网站的一种项目编译、运行、打包工具。

build.js:是我们完成项目之后需要运行的, 可以将我们的项目文件打包成静态文件,存放在项目根目录的dist文件夹中(现在目录里还没有这个文件夹,build的时候会自动生成)。

check-versions.js:主要是检查一些所依赖的工具的版本是否适用,如nodejs、npm,若版本太低则会提示出来。

logo.png:存放的是vuelogo图片。

utils.js:提供工具函数,包括生成处理各种样式语言的loader,获取资源文件存放路径的工具函数。

vue-loader.conf.js: 引入了utils.js ,应该是用于切换开发模式和生产模式的文件,以便于用不同模式来解析loader。

webpack.base.conf.js:此配置文件是vue开发环境的wepack相关配置文件,主要用来处理各种文件的配置。

webpack.dev.conf.js:在webpack.base.conf的基础上增加完善了开发环境下面的配置。

webpack.prod.conf.js:构建的时候用到的webpack配置来自webpack.prod.conf.js,该配置同样是在webpack.base.conf基础上的进一步完善。

文件示例如下所示:

563edb4b8b696aaf6f6898caf786b633.png

3.2 config文件

config:文件包含webpack环境配置文件。

index.js:描述了开发和构建两种环境下的配置。

dev.env.js,prod.env.js,test.env.js:三个文件简单设置了环境变量。

文件示例如下所示:

8496950e35a758765dde1d16b851fbd5.png

3.3 node_moules文件

node_moules:存放的是npm加载的项目依赖模块 ,以后要添加依赖也是放在这个里面。

文件示例如下所示:

92328885f9590ab09d04d428776b8adc.png

3.4 src文件

src:放置组件和入口文件。

assets:主要存放一些静态图片资源的目录。

components:这里存放的是开发需要的的各种组件,各个组件联系在一起组成一个完整的项目。

router:存放了项目路由文件。

App.vue:是项目主组件,也是项目所有组件和路由的出口,之后它会被渲染到项目根目录的 index.html 中显示出来,我们可以在这里写一些适合全局的css样式。

main.js:入口文件,引入了vue模块和app.vue组件以及路由router,我们需要在全局使用的一些东西也可以定义在这里面。

文件示例如下所示:

92130d80f7ade4ed719e9154db5a7350.png

3.5 static文件

static:存放的是项目的静态文件,用于存放需要使用的一些外部的js、css文件,需要使用的时候从这里引到文件内。

文件示例如下所示:

ad7db28841afc9605aa7e6f7bef9dfed.png

3.5 test文件

test:初始测试目录。

unit:单元测试,可以为每个组件编写单元测试,放在 test/unit/specs 目录下面,单元测试用例的目录结构建议和测试的文件保持一致(相对于src),每个测试用例文件名以 .spec.js结尾。 执行 npm run unit 时会遍历所有的 spec.js 文件,产出测试报告在 test/unit/coverage 目录。

e2e:e2e或者端到端(end-to-end)或者UI测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。

文件示例如下所示:

0f0ff3504bdd3c7d0ecd9507333d6a45.png

3.6 其他文件

.babelrc:ES6语法编译配置。

.editorconfig:代码编写规格。

.eslintignore:项目的根目录中创建文件来告诉ESLint忽略特定的文件和目录,该文件是纯文本文件。

.eslintrc.js:eslint的配置文件,eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,如vscode的eslint插件。当有不符合配置文件内容的代码出现就会报错或者警告。

.gitignore:忽略的文件。

.postcssrc.js:兼容选项(如果已经安装postcss,需要一大堆loader配置,这时项目根目录会生成“.postcssrc.js”文件)。

index.html:项目文件入口。

package.json:项目及工具的依赖配置文件。

README.md:项目说明。

文件示例如下所示:

ec71eea58c1b035f016483d87f6d44b4.png

相关推荐:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值