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面象对象设计
Apr 28 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
vue实现员工信息录入功能
Jun 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
关于文本留言本的分页代码
2006/10/09 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
Js 中debug方式
2010/02/07 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
python实现简单学生信息管理系统
2020/04/09 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
写自荐信的注意事项
2014/03/09 职场文书
火灾现场处置方案
2014/05/28 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
音乐课外活动总结
2015/05/09 职场文书
起诉意见书范文
2015/05/19 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle
Windows7下FTP搭建图文教程
2022/08/05 Servers