解读vue生成的文件目录结构及说明


Posted in Javascript onNovember 27, 2017

利用node和npm环境我们可以很快的搭建一个vue环境。具体步骤,请看上一篇博客。搭建完成后,我们可以看到生成的文件夹中包括如下文件:

解读vue生成的文件目录结构及说明 

1、build文件夹是保存一些webpack的初始化配置。config文件夹保存一些项目初始化的配置。

2、node_modules是npm加载的项目依赖的模块。

3、src目录是我们要开发的目录,打开是这样的:

解读vue生成的文件目录结构及说明 

其中assets:用来放置图片

components:用来放组件文件

app.vue:是项目入口文件,代码如下:

解读vue生成的文件目录结构及说明 

App.vue相当于一个组件

main.js是项目的核心文件。代码如下:

解读vue生成的文件目录结构及说明 

import Vue from ‘vue' 
import App from ‘./App' 
import router from ‘./router'

这三句的意思是首先引入vue,然后引入了./App即App.vue文件。最后一句是引入一段路由配置。

然后是实例化new Vue .el:'#app'意思谁将所有的组件都放在id为app的元素中。components表明引入的文件,此处就是app.vue这个文件,这个文件的内容将以这样的标签写进#app中。

观察App.vue文件我们看可以看到一共有三个部分,分别是。

webpack在编译时可以将.vue文件中的这三部分抽出来合成cinderella单独的文件。

4、static文件夹用来放置静态资源目录

5、index.html是首页入口文件

6、package.json是项目配置文件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 #Javascript
基于vue2.0实现简单轮播图
Nov 27 #Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 #Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 #Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 #Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 #Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 #Javascript
You might like
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
javascript 获取网页参数系统
2008/07/19 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
js数组的操作详解
2013/03/27 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
python模块之paramiko实例代码
2018/01/31 Python
Pandas中resample方法详解
2019/07/02 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
this关键字的作用
2016/01/30 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
运动会邀请函范文
2014/02/06 职场文书
保险经纪人求职信
2014/03/11 职场文书
超越自我演讲稿
2014/05/21 职场文书
产品调价通知函
2015/04/20 职场文书
三方合作意向书范本
2015/05/09 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Go语言编译原理之源码调试
2022/08/05 Golang