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 垃圾收集机制介绍理解
May 14 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
jQuery限制图片大小的方法
May 25 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
angular动态表单制作
Feb 23 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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
PHP 事务处理数据实现代码
2010/05/13 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php的ddos攻击解决方法
2015/01/08 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
Javascript中的数学函数
2007/04/04 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
python requests 测试代理ip是否生效
2018/07/25 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python自带的IDE在哪里
2020/07/01 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
营销与策划个人求职信
2013/09/22 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2015元旦标语横幅
2014/12/09 职场文书
小学运动会入场口号
2015/12/24 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书