vue项目的各个文件作用:

build:放置的是webpack配置文件,一般不动,修改了必须重启服务器才能生效

config:放置针对开发环境和线上环境的配置文件,一般不动 修改后需重启

node_modules:项目的依赖

src:所有的源代码

static:静态资源 //只有这个目录可以被外部访问到,如http://localhost:8080/static/mock/index.json 能访问到内容,
//http://localhost:8080/src/main.js 这样不会访问到内容,只会跳回到http://localhost:8080/
//static用于本地模拟数据

.babelrc:babel编译

.editorconfig:浏览器配置

eslintignore:eslint的配置

.eslintrc.js:

.gitignore: //加上目录如代码: static/mock就表明这个目录下的文件不会被提交到线上的git仓库里,以及本地的仓库也不会提交

.postcssrc.js:

index.html:

package-lock.json:

package.json:

README.md:

src-->main.js 整个项目的入口文件

因为webpack中配置了hot-reload,所以代码修改,浏览器自动刷新。

组件的封装: .vue文件 包括组件的模板(template) 逻辑(script) 样式(style)

main.js入口文件

启动项目:在项目文件夹下运行命令 npm run start

vue项目的各个文件作用的更多相关文章

  1. Vue项目中的文件/文件夹命名规范

    Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ...

  2. vue项目中一些文件的作用

    原文 简书原文:https://www.jianshu.com/p/38749e5bec3c 大纲 1.vue项目结构 2.主要的配置文件 2.1.package.json 2.2.dev-serve ...

  3. vue项目 引入js文件

    例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...

  4. vue项目使用keep-alive的作用

    在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果 ...

  5. Asp.Net Core 轻松学-项目目录和文件作用介绍

    前言     上一章介绍了 Asp.Net Core 的前世今生,并创建了一个控制台项目编译并运行成功,本章的内容介绍 .NETCore 的各种常用命令.Asp.Net Core MVC 项目文件目录 ...

  6. 【转载】Vue项目中的文件/文件夹命名规范

    文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名 ...

  7. Asp.Net Core 轻松学系列-3项目目录和文件作用介绍

    目录 前言 结语 前言     上一章介绍了 Asp.Net Core 的前世今生,并创建了一个控制台项目编译并运行成功,本章的内容介绍 .NETCore 的各种常用命令.Asp.Net Core M ...

  8. vue项目使用.env文件配置全局环境变量

    一.env文件的认识: (1).env 文件主要的作用是存储环境变量,也就是会随着环境变化的东西,比如数据库的用户名.密码.缓存驱动.时区,还有静态文件的存储路径之类的.因为这些信息应该是和环境绑定的 ...

  9. vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

随机推荐

  1. 201871010117-石欣钰《面向对象程序设计(Java)》第四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  2. LuoguP5540:【模板】最小乘积生成树(几何逼近)

    题意:给定N点,M边,每条边有两个属性(a,b),现在让你选N-1条边出来,然后使得∑a*∑b最小.N<200,M<1e4: 思路:我们把∑a看成x,∑b看成y,那么一个方案对应一个二维坐 ...

  3. woocommerce分类页产品数量修改

    我们用woocommerce建商城,不同的模板分类页产品数量不同,如果想要显示更多或更少的数量要如何修改呢?很简单,一行代码就能搞定!打开当前主题的function.php文件,加入如下代码,把18改 ...

  4. ABP 菜单和权限

    大致操作步骤,原理之后补充. 添加菜单: 在 ContractOwner.Web.Startup.ContractOwnerNavigationProvider 的SetNavigation方法中添加 ...

  5. vue之父子组件通信

    一. 父-子组件间通信 let children={    template:`<div><h1>{{send}}</h1></div>`,  # 将传 ...

  6. C++各大有名库的介绍——网络通信

    ACE是C++库的代表,超重量级的网络通信开发框架.ACE自适配通信环境(Adaptive Communication Environment)是可以自由使用.开放源代码的面向对象框架,在其中实现了许 ...

  7. 归并排序 MergeSort

    今天第一次看懂了严奶奶的代码( ̄▽ ̄)~*,然后按照厌奶那的思路进行了一波coding,稍加调试后即可跑起来. 学习链接:排序七 归并排序.图解排序算法(四)之归并排序 merge函数:将两个有序序列 ...

  8. 《Machine Learning - 李宏毅》视频笔记(完结)

    https://www.youtube.com/watch?v=CXgbekl66jc&list=PLJV_el3uVTsPy9oCRY30oBPNLCo89yu49 https://www. ...

  9. 关于Vue中props的详解

    看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数 ...

  10. Spring中Bean命名源码分析

    Spring中Bean命名源码分析 一.案例代码 首先是demo的整体结构 其次是各个部分的代码,代码本身比较简单,不是我们关注的重点 配置类 /** * @Author Helius * @Crea ...