解读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 相关文章推荐
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
详解vue中组件参数
Jul 09 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
从原生JavaScript到React深入理解
Jul 23 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下escape解码函数的实现方法
2010/08/08 PHP
PHP关联链接常用代码
2012/11/05 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php常用hash加密函数
2014/11/22 PHP
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
原生JS实现N级菜单的代码
2017/05/21 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python中变量交换的例子
2014/08/25 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
建材业务员岗位职责
2013/12/08 职场文书
工作中个人的自我评价
2013/12/31 职场文书
条幅标语大全
2014/06/20 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
研究生简历自我评
2015/03/11 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
浅析NIO系列之TCP
2021/06/15 Java/Android
python 对图片进行简单的处理
2021/06/23 Python
如何利用python创作字符画
2022/06/25 Python