当前位置:首页 > 日记 > 正文

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

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

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

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

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

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

其中assets:用来放置图片

components:用来放组件文件

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

App.vue相当于一个组件

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

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是项目配置文件

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

相关文章

photoshop cs6怎么等比例缩放?

photoshop cs6怎么等比例缩放?

缩放,等比例,电脑软件,photoshop,在PS画布上已有一张图,现在需要把“人物”等比例缩放。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、在PS画布上已有一张图,现在需要把“女孩”…

PS怎么排版图文? ps文字排版的四个

PS怎么排版图文? ps文字排版的四个

文字排版,图文,技巧,电脑软件,PS,好的作品,其最基本的要素就是细节的丰富和完善,细节处理得好,作品想出问题都难。下面就对大部分人都非常头疼的文案排版需要注意的细节问题做一个较为详细的总结和分析,希望能对文案排版有困惑的朋友有一个较好…

node文字生成的示例代码

node文字生成的示例代码

示例代码,文字,电脑软件,node,今天老板提了需求,要在服务端生成邀请卡,嗯…,简单的说就是把要这张:变成差多这样的:后端搞ruby的哥们搞了个html转图片,说转得太慢了,我就把这坑接下来了所以睡前就倒腾了下,搞了个简单的实现解决思路文字转svg -> sv…

Angular中$state.go页面跳转并传递

Angular中$state.go页面跳转并传递

传递参数,方法,页面跳转,电脑软件,Angular,遇到一个页面跳转的时候,在跳转后的页面获取跳转前页面的数据,我想到用一种是localstorage,一种用broadcast和on,然后老大说不用这么麻烦,既然都$state.go了直接带参数,这次就介绍一下$state.go页面跳…

ionic中的$ionicPlatform.ready事

ionic中的$ionicPlatform.ready事

设置,通用,事件中,电脑软件,ionic,前言$ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件,相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理, 为了代码的可读性,我们把设置功能封装成一…

一个简易的js轮播效果

一个简易的js轮播效果

简易,效果,电脑软件,js,一个简易的js图片轮播效果,话不多说,代码献上. 只有img标签的html代码,做测试用:<body> <img src="images/class1-1.jpg" id="img"> </body> 下面是js代码:var k=0; //当前的索引var ss = new Array(); //数组,用来…

微信小程序 本地按照屏幕尺寸处理

微信小程序 本地按照屏幕尺寸处理

屏幕尺寸,程序,电脑软件,微信小,微信小程序 本地图片按照屏幕尺寸处理前言:个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本…

wps演示中怎么制作柱状图

wps演示中怎么制作柱状图

柱状图,方法,演示,电脑软件,wps,  你知道怎么在wps幻灯片中制作柱状图吗?对于刚从其它版本转型过来的应该就不会太懂wps,没关系下面小编就为你介绍wps演示怎么制作柱状图的方法啦!欢迎大家来到学习wps制作柱状图。wps演示制作柱状图的方法…

微信小程序之数据双向绑定与数据操

微信小程序之数据双向绑定与数据操

双向绑定,数据操作,数据,程序,电脑软件, 微信小程序之数据双向绑定与数据操作数据双向绑定是指js部分数据发生变化是html部分的数据也会发生变化,当然html部分数据发生变化js部分数据也会发生变化,从而使界面很方便的实现动态数据显示,一般拥…

怎样在Word2013文档中任意位置放置

怎样在Word2013文档中任意位置放置

数字,文档,位置,页码,电脑软件,  普通数字页码,是指单纯的数字,页码不带其他装饰。如果需要移动这类页码,可以将数字放置到文本框中,然后通过拖动文本框来改变页码的位置。以下是小编为您带来的关于在Word2013文档中任意位置放置普通数字页码…

ps怎么设计一个stop交通标志图?

ps怎么设计一个stop交通标志图?

交通标志,电脑软件,ps,stop,想要使用ps绘制一个stop交通标志图,该怎么绘制呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、新建400*400像素的画布,分辨率为300,颜色模式…

portraiture教程:如何利用磨皮滤镜

portraiture教程:如何利用磨皮滤镜

教程,滤镜,人像,电脑软件,portraiture,下面教大家如何利用磨皮滤镜portraiture为人像磨皮,使用portraiture滤镜磨皮后再Photoshop中进行调整,从原图与效果图可以明显看出,磨皮后人物皮肤变得更加光滑,更显的年轻。软件名称:Portraiture滤镜 port…