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 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
js进行表单验证实例分析
Feb 10 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
详解vue express启动数据服务
Jul 05 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 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
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
express启用https使用小记
2019/05/21 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
python局域网ip扫描示例分享
2014/04/03 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
优秀通讯员事迹材料
2014/01/28 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书