node_modules:npm 加载的项目所需要的各种依赖模块。

src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

  1、assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名),如logo等;

  2、components:目录里放的是一个个的组件文件;

  3、App.vue:项目入口组件(跟组件),我们也可以将组件写这里,而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染,这里面的<router-view/>必不可少。

  4、main.js :项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等(项目运行后会在index.html中形成一个app.js文件)。

  5、router/index.js:配置路由的地方

static:静态资源目录(会原分不动的对文件进行处理),如图片、字体等。

build:最终发布的代码的存放位置。

config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

test:初始测试目录,可删除

package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。(大概版本)

package-lock.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。(具体版本)

README.md:项目的说明文件。

webpack.config.js:webpack的配置文件,例:把.vue的文件打包成浏览器能读懂的文件。

.babelrc:是检测es6语法的配置文件,例:适配哪些浏览器的限制

.gitignore:上传到服务器忽略哪些文件的配置(比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置)

.postcssrc.js:前缀的配置 (css转化的配置)

.editorconfig:对代码进行规范,例:root是否进行检测,代码尾部是否换行,缩行前面几个空格...(建议定义这个规范)

.eslintrc.js:配置eslint语法规则(在这里面的rules属性中配置让哪个语法规则失效)

.eslintignore:忽略eslint对项目某些文件的语法规则的检查

vue/cli的目录结构说明的更多相关文章

  1. 怎样理解 Vue 项目的目录结构?

      Vue 项目的目录结构如下, 我们将会在后面逐个去了解它们的作用: 01. build - 存储项目构建相关的代码, 比如 webpack. 02. config - Vue 的配置目录,包括端口 ...

  2. Vue学习官网和Vue的书籍 目录结构

    Vue基础知识学习网站[中文] https://cn.vuejs.org/v2/guide/ Vue路由知识学习网站[中文] https://router.vuejs.org/zh/guide/  V ...

  3. Vue 入门之目录结构介绍

    Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...

  4. II、Vue的项目目录结构 一些语法

    Vue目录结构 这是某闭源项目的web端目录结构: 目录解析: -目录/文件 - build 项目构建(webpack)相关代码 config 配置目录.端口号:也有默认的 node_modules ...

  5. Vue学习笔记-目录结构

    1.采用脚手架构建的项目基本目录结构 可能会有些许差别,但是大致基本目录都差不多 2.项目入口(index.html,main.js,App.vue) 一般情况下,我们都习惯性将 index.html ...

  6. Vue.js-项目目录结构解析

    1.Vue初始化项目目录如下: 2.目录各项含义如下:

  7. 【vue】项目目录结构及使用多的知识点

    项目目录: Node_modules/npm安装的该项目的依赖库 vuex/文件夹存放的是和 Vuex store 相关的东西(state对象,actions,mutations) router/文件 ...

  8. vue脚手架的目录结构

    . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 ...

  9. Vue项目开发目录结构

    最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两 ...

随机推荐

  1. 表达式树扩展 动态生成表达式树插件 Sy.ExpressionBuilder。

    CURD中,基础查询我感觉还是很烦人的一个浪费时间的工作,我经历过远古时代的GetAll(string name,int age),这种方式写服务的时候真的是心中一万个草泥马飞过,后面逐渐的变成了传一 ...

  2. [ vue ] xxxProject项目杂记

    2020.4.9 加入eCharts 2020.4.8 完成article的显示,其间碰到全局路由守卫写的有错误,导致跳转报错.已修复. 加入keep-alive功能,缓存视图数据 疑问:如果在全局组 ...

  3. PowerPoint2010实现折线图动态展示

    原文链接:https://www.toutiao.com/i6797629648881582596/ 我们经常会制作折线图表来表达一个过程的趋势变化,而如果让折线图动起来,会更加的生动.接下来我们将一 ...

  4. k8s中的nginx-ingress如何配置路径重定向

    k8s中的nginx-ingress如何配置路径重定向 一. 需求描述 路径重定向的一般应用场景: 调整用户浏览的URL,看起来更规范 为了让搜索引擎收录网站内容,让用户体验更好 网站更换新域名后 根 ...

  5. 【PTA】5-2 下列程序读入时间数值,将其加1秒后输出,时间格式为:hh: mm: ss,即“小时:分钟:秒”,当小时等于24小时,置为0。

    5-2 下列程序读入时间数值,将其加1秒后输出,时间格式为:hh: mm: ss,即"小时:分钟:秒",当小时等于24小时,置为0. #include <stdio.h> ...

  6. Hybrid App(混合开发) 移动端开发调试

    1.下载项目,npm install安装依赖 本地运行 npm run dev(根据具体packjson配 置而定) 2.局域网访问:http://172.20.9.35:8080/ 3.手机端访问: ...

  7. 将Cesium Tools用于更好的构建管理

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Cesium技术正在给建筑业带来革命性的变化.我们与 partn ...

  8. 云图说|DDS读写两步走,带您领略只读节点的风采

    摘要:为了扩展主节点的读请求能力,DDS提供具备独立连接地址的只读节点,适合独立系统直连访问,以缓解大量读请求给主节点造成的压力. 本文分享自华为云社区<[云图说]第235期 DDS读写两步走 ...

  9. python文档1-unittest单元测试之mock

    什么是mock unittest.mock是一个用于在Python中进行单元测试的库,Mock翻译过来就是模拟的意思,顾名思义这个库的主要功能是模拟一些东西.它的主要功能是使用mock对象替代掉指定的 ...

  10. GitHub镜像

    GitHub 官网镜像(可以用来clone push等,但是不能登录) https://github.com.cnpmjs.org https://git.sdut.me https://hub.fa ...