vue项目结构php写哪里,Vue-cli搭建项目后目录结构的分析(图文)
这篇文章给大家介绍的文章内容是关于Vue-cli搭建项目后目录结构的分析,有很好的参考价值,希望可以帮助到有需要的朋友。
1.前言
Vue并不限制你的代码结构。但是,它规定了一些需要遵守的规则:
1、应用层级的状态应该集中到单个store对象中。
2、提交mutation是更改状态的唯一方法,并且这个过程是同步的。
3、异步逻辑都应该封装到action里面。
2.项目文件目录显示如下
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基础上的进一步完善。
文件示例如下所示:
3.2 config文件
config:文件包含webpack环境配置文件。
index.js:描述了开发和构建两种环境下的配置。
dev.env.js,prod.env.js,test.env.js:三个文件简单设置了环境变量。
文件示例如下所示:
3.3 node_moules文件
node_moules:存放的是npm加载的项目依赖模块 ,以后要添加依赖也是放在这个里面。
文件示例如下所示:
3.4 src文件
src:放置组件和入口文件。
assets:主要存放一些静态图片资源的目录。
components:这里存放的是开发需要的的各种组件,各个组件联系在一起组成一个完整的项目。
router:存放了项目路由文件。
App.vue:是项目主组件,也是项目所有组件和路由的出口,之后它会被渲染到项目根目录的 index.html 中显示出来,我们可以在这里写一些适合全局的css样式。
main.js:入口文件,引入了vue模块和app.vue组件以及路由router,我们需要在全局使用的一些东西也可以定义在这里面。
文件示例如下所示:
3.5 static文件
static:存放的是项目的静态文件,用于存放需要使用的一些外部的js、css文件,需要使用的时候从这里引到文件内。
文件示例如下所示:
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测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。
文件示例如下所示:
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:项目说明。
文件示例如下所示:
相关推荐:
vue项目结构php写哪里,Vue-cli搭建项目后目录结构的分析(图文)相关推荐
- 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目
基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 转载于:https://github.com/Meowv/Blog 首先,默认咱们已经有了.net ...
- vue项目结构php写哪里,vue项目结构(详细教程)
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下 新建一个项目之后,我们来看一下项目的目录结构 几个主要文件的内容 index.html文件(入口文件,系统进入之后先进入in ...
- vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
- vue在html中写style,vue开发之style(六)(CSS页面布局之样式、背景、文字)
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法 还有vue的使用,重点就在webpack这个: vue开发之webpa ...
- 项目经历怎么写_简历里的项目经历怎么写才能打动招生官和面试官?
机器学习课程上新 扫码添加小助手, 了解最新机器学习内容 咨询最热硅谷机器学习课程 申请季到了, 文书背景空空心急如焚? 求职季实习季到了, 简历如何凸显自己的专业背景硬实力? 啊,怎么办 不多说,先 ...
- 项目经历怎么写_工作经历、项目经验怎么写?
想得到专业面试攻略吗?想早日成为职场达人吗?小工老师来助力你! 简历中最有价值含量的内容,毋庸置疑就是工作经历和项目经验了.通过这部分内容,就可以看出候选人的大致能力,也是面试官最关注的地方,觉得面试 ...
- 关于mysql项目经验怎么写_数据库管理员岗位项目经历怎么写
项目经历(案例一) 项目时间:2017-04到2014-04 项目名称:ORACLE数据库性能调优 项目描述: 项目介绍 根据数据库指定的快照策略,生成STATSPACK报告或者AWR报告,进行数据分 ...
- python工程师简历项目经验怎么写_简历上的项目经历怎么写 ?这 3 条原则不可忽视 !...
阅读本文大概需要 5 分钟. 作者:黄小斜 作为一个程序员,想必大家曾经都做过一些项目,可能现在手头上也还有一些项目. 不过还是有很多学生朋友来问我"没有项目怎么办",诚然,确实有 ...
- java项目经验怎么写_模具工简历项目经验怎么写
项目经验(案例一) 项目时间:2015-04 - 2015-05 项目名称:活动策划 项目描述: 项目介绍 通过策划一系列的活动来提高家具店的知名度,从而拔高家具店正式开业后的销售额. 我的职责 协助 ...
最新文章
- Hibernate事务处理
- matlab做横截面回归,matlab - 将横截面表面轮廓拟合到通用的已知公式以获得系数并对表面进行数学建模 - 堆栈内存溢出...
- Exercise 12: Prompting People
- multi-mechanize error: can not find test script: v_user.py问题
- python工资高还是java-python为什么叫爬虫 python工资高还是java的高
- nmon和nmon analyser使用方法
- PostgreSQL 查询涉及分区表过多导致的性能问题 - 性能诊断与优化(大量BIND, spin lock, SLEEP进程)...
- java异常处理拦截器
- 微信商城的这六大优势,以及这些丰富的功能,你知道吗?
- 音频处理——音频编码原理简介
- 物联网的关键 - 传感器
- 镜头主要参数与光 源 选 型,选型焦距计算公式,CS、C接口工业镜头与M12镜头的关系知识。
- 灰、黄、蓝三种颜色的收集装置模型练习及实现思路
- ESP32实验-自建web服务器配网01
- 3、可燃气体的爆炸极限
- Chrome开发工具Network没有显示完整的http request和response对话
- Spring框架学习笔记---完结
- 第二十四章 Caché 变量大全 $ZA 变量
- ROS入门之乌龟圆周运动
- 分析千万数据,我们深扒了风口上的球鞋转卖市场