vue-cli目录结构介绍
原文
总体框架
一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可。
文件结构细分
1.build——[webpack配置]
build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm run dev首先启动的就是dev-server.js,它会去检查node及npm版本,加载配置文件,启动服务。
2.config——[vue项目配置]
config文件主要是项目相关配置,我们常用的就是当端口冲突时配置监听端口,打包输出路径及命名等
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组件来填充
4.2 App.vue——[根组件]
一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)
【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
后期还可以引入插件,当然首先得安装插件。
4.4 router——[路由配置]
router文件夹下,有一个index.js,即为路由配置文件
这里定义了路径为'/'的路由,该路由对应的页面是Hello组件,所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件
类似的,我们可以设置多个路由,‘/index’,'/list'之类的,当然首先得引入该组件,再为该组件设置路由。
vue-cli目录结构介绍相关推荐
- Vue项目目录结构介绍(三)
前言 本章我们会对一个 Vue 项目的目录结构进行讲解,解释各子目录以及文件的作用,前端的模块化,Vue 单文件组件规范等. 1.基础目录和文件介绍 在上一章,我们通过 vue-cli 创建了一个新的 ...
- Vue项目目录结构介绍讲解
1.Vue单文件组件 node_modules:依赖的node工具包目录 public: 一般用于存放一些静态资源文件,例如图片,视频,音频等资源文件.需要特别注意的是webpack在进行打包的时候, ...
- 【Vue】—项目的目录结构介绍
[Vue]-项目的目录结构介绍
- 【Vue前端开发学习】第2章,Vue项目目录结构
文章目录 前言 一.新增router文件夹及其配置方法 二.新增store文件夹及其配置方法 三.index.html.App.vue.main.js三者之间的联系 前言 上一章节,通过Pycha ...
- Linux常用命令(本篇包括,Linux目录结构介绍、Linux Shell介绍、9个常见命令介绍、文件的概念、文件的操作(20个)、目录的操作、文件和目录的权限、文件压缩及解压缩)
Linux常用命令(本篇包括,Linux目录结构介绍.Linux Shell介绍.9个常见命令介绍.文件的概念.文件的操作(20个).目录的操作.文件和目录的权限.文件压缩及解压缩) ...
- Vue基础 目录结构与代码
作者简介:一名计算机萌新.前来进行学习VUE,让我们一起进步吧. 座右铭:低头赶路,敬事如仪 个人主页:我叫于豆豆吖的主页 目录 前言 一.Vue.js 目录结构 1.目录解析 二.Vue.js ...
- Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录 一 ...
- 帝国cms目录结构介绍
帝国CMS目录结构介绍 / 系统根目录 ├d/ 附件和数据存放目录 (data) │├file/ 附件存放目录 │├js/ JS调用生成目录 │└tx ...
- Kettle教程(二):Kettle目录结构介绍
文章目录 前言 一.Kettle的Spoon/Pan/Kitchen/Carte 简介 1.Spoon 2.Pan 3.Kitchen 4.Carte 二.Kettle的目录结构介绍 三.总结 前言 ...
- vue php 架构目录,Vue.js 目录结构
Vue.js 目录结构 上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Atom等) 中打开该目录,结构如下所示: 目录解析目录/文件说明build项目构建(webpack)相 ...
最新文章
- WCF中常见的几种Host,承载WCF服务的方法详解
- HDU 1231 最大连续子序列
- getjsonobject字符串解析出错_【干货分享】达梦DISQL工具使用解析之 DISQL环境变量设置...
- 【聚类算法】sklearn聚类方法详解
- 【MySQL】mysql 远程连接111
- Centos 7安装Postfix用于发送提醒邮件
- [翻译] ASP.NET Core 2.2 正式版发布
- python实验收获_python实验课代码心得
- HDU-5123-who is the best?
- Java Hashtable equals()方法与示例
- 【算法分析与设计】鸡尾酒排序
- 飞信for linux,开源飞信 Openfetion for Linux
- 商品进销差价_商品进销差价如何核算?
- MySQL多表关联查询与存储过程
- FR模板参数在SQL中或单元格过滤的写法
- 局域网服务器文件夹加密软件,企业局域网共享文件夹加密软件、局域网共享文件访问控制软件的使用...
- 利用计算机教学的体会,教师计算机教学学习体会
- win10的pagefile.sys是什么文件?pagefile.sys文件太大如何移动到D盘中?
- MATLAB学习笔记(二)——数据及其运算
- html5遮罩层动画制作,纯css3图片点击弹出动画遮罩层效果
热门文章
- 5999元!OPPO Find X5 Pro 8+256GB版今日首销
- 格力发布2021年中期利润分配预案:每10股派发现金股利10元
- 宣称“禁用新疆产品”,英特尔紧急道歉:出于表述合规合法初衷
- 还香吗?iPhone 13/Pro 手机“失灵”:不支持通过 Apple Watch 解锁屏幕
- 苹果第二代自研M系列芯片MacBook Pro有望在未来几周上市
- 马斯克回应“逃税”:没有从特斯拉领取高薪 一直在按规定缴税
- 水滴公司更新招股书:发行价区间为10-12美元
- 柴犬为什么总是被卡住狗头?
- 2月份全球制造业PMI为55.6% 已连续8个月保持在50%以上
- 国产手机卖的越来越贵,是好是坏?