解读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 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
使用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
PHP学习之字符串比较和查找
2011/04/17 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
javascript表达式和运算符详解
2017/02/07 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python找出完数的方法
2018/11/12 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
详解python UDP 编程
2020/08/24 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
九年级政治教学反思
2014/02/06 职场文书
公司办公室岗位职责
2014/03/19 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
交通事故起诉书
2015/05/19 职场文书