vue-cli入门之项目结构分析


Posted in Javascript onApril 20, 2017

前言

在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli项目,那么接下来,我们来梳理一下vue-cli项目的结构。

总体框架

一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可。

vue-cli入门之项目结构分析

文件结构细分

1.build——[webpack配置]

build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm run dev首先启动的就是dev-server.js,它会去检查node及npm版本,加载配置文件,启动服务。

vue-cli入门之项目结构分析

2.config——[vue项目配置]

config文件主要是项目相关配置,我们常用的就是当端口冲突时配置监听端口,打包输出路径及命名等

vue-cli入门之项目结构分析

3.node_modules——[依赖包]

node_modules里面是项目依赖包,其中包括很多基础依赖,自己也可以根据需要安装其他依赖。安装方法为打开cmd,进入项目目录,输入npm install [依赖包名称],回车。

在两种情况下我们会自己去安装依赖:

(1)项目运行缺少该依赖包:例如项目加载外部css会用到的css-loader,路由跳转vue-loader等(安装方法示例:npm install css-loader)

(2)安装插件:如vux(基于WEUI的移动端组件库),vue-swiper(轮播插件)

注:有时会安装指定依赖版本,需在依赖包名称后加上版本号信息,如安装11.1.4版本的vue-loader,输入npm install vue-loader@11.1.4

4.src——[项目核心文件]

项目核心文件前面已经进行了简单的说明,接下来重点讲解main.js,App.vue,及router的index.js

4.1 index.html——[主页]

index.html如其他html一样,但一般只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件来填充

vue-cli入门之项目结构分析
index.html

4.2 App.vue——[根组件]

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

vue-cli入门之项目结构分析
App.vue

【template】

其中模板只能包含一个父节点,也就是说顶层的div只能有一个(例如下图,父节点为#app的div,其没有兄弟节点)

<router-view></router-view>是子路由视图,后面的路由页面都显示在此处

打一个比喻吧,<router-view>类似于一个插槽,跳转某个路由时,该路由下的页面就插在这个插槽中渲染显示

【script】

vue通常用es6来写,用export default导出,其下面可以包含数据data,生命周期(mounted等),方法(methods)等,具体语法请看vue.js文档,在后面我也会通过例子来说明。

【style】

样式通过style标签<style></style>包裹,默认是影响全局的,如需定义作用域只在该组件下起作用,需在标签上加scoped,<style scoped></style>

如要引入外部css文件,首先需给项目安装css-loader依赖包,打开cmd,进入项目目录,输入npm install css-loader,回车。安装完成后,就可以在style标签下import所需的css文件,例如:

<style>

  import './assets/css/public.css'

</style>

这样,我们就可以把style下的样式封装起来,写到css文件夹,再引入到页面使用,整个vue页面也看上去更简洁。

4.3 main.js——[入口文件]

main.js主要是引入vue框架,根组件及路由设置,并且定义vue实例,下图中的

components:{App}就是引入的根组件App.vue

后期还可以引入插件,当然首先得安装插件。

vue-cli入门之项目结构分析
main.js

4.4 router——[路由配置]

router文件夹下,有一个index.js,即为路由配置文件

vue-cli入门之项目结构分析
router下的index.js

这里定义了路径为'/'的路由,该路由对应的页面是Hello组件,所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件

类似的,我们可以设置多个路由,‘/index','/list'之类的,当然首先得引入该组件,再为该组件设置路由。

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

Javascript 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
js原生map实现的方法总结
Jan 19 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 #Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 #Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 #Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 #Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 #Javascript
Vue如何引入远程JS文件
Apr 20 #Javascript
AngularJS改变元素显示状态
Apr 20 #Javascript
You might like
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
详解Vue之事件处理
2020/07/10 Javascript
python和C语言混合编程实例
2014/06/04 Python
python通过smpt发送邮件的方法
2015/04/30 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python顺序执行多个py文件的方法
2019/06/29 Python
实例详解Python装饰器与闭包
2019/07/29 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
《老王》教学反思
2014/02/23 职场文书
教室布置标语
2014/06/26 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
考研经验交流会策划书
2015/11/02 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
vue使用watch监听属性变化
2022/04/30 Vue.js
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers