vue项目总结之文件夹结构配置详解


Posted in Javascript onDecember 13, 2017

前言

之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化、规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助。

基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next、scss 等最新语言特性。下面随着小编来一起学习学习吧。

项目配置

首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉。本次开发使用到的有: vue , vuex , axios , elementUI 。

然后可以按官方指引,使用 vue-cli 搭建 vue 的项目,在项目里按照上面的文档尝试修改,加深理解:

# 安装依赖库,建议指定 vue 和 element 版本,避免版本升级带来意料之外的 bug
$ npm install vue@2.1.6 element-ui@1.4.6 vuex axios
#全局安装脚手架
$ npm install -g vue-cli 
# 创建一个基于 webpack 模板的新项目my-project
$ vue init webpack my-project
# 进入项目目录
$ cd my-project
# 安装依赖
$ npm install
# 运行项目
$ npm run dev

运行之后,看到以下页面表明项目环境搭建成功:

vue项目总结之文件夹结构配置详解

项目结构

搭建成功后,使用编辑器打开项目目录,大致是这样的结构:

vue项目总结之文件夹结构配置详解

相关文件和文件夹的含义:

  • build 文件夹: 里面是对 webpack 开发和打包的相关设置,包括入口文件、输出文件、使用的模块等;
  • config 文件夹: 主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。
  • node_modules: 项目的依赖库;
  • src 文件夹: 我们主要操作的地方,组件的增加修改等都在这个文件夹里操作,下文会有详细介绍;
  • static 文件夹: 静态资源文件夹,放置不会变动的资源,直接被复制到最终的打包目录(默认是dist/static)下;
  • .babelrc: 使用 babel 的配置文件,用来设置转码规则和插件;
  • .editorconfig: 代码的规范文件,规定使用空格或 tab 缩进,缩进的长度是两位还是四位之类的代码风格,使用的话需要在编辑器里下载对应的插件;
  • .eslintignore: 指定 eslint 忽略的文件;
  • .eslintrc: 配置 eslint 的检测规则,强制按照规则书写代码;
  • .gitignore: 指定 git 忽略的文件,所有 git 操作均不会对其生效;
  • .postcssrc: 指定使用的 css 预编译器,里面默认配置了 autoprefixer ,自动补全浏览器前缀;
  • favicon.ico: 浏览器标签页 title 旁边的小图标,这是需要我们自己粘贴过来的;
  • index.html: 首页文件,项目运行的时候,会自动将我们在 src 文件夹里生成的组件插入这个文件里;
  • LICENSE: 项目声明的 license;
  • package-lock.json: 当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新;
  • package.json: 指定项目开发和生成环境中需要使用的依赖库;
  • README.md: 相当于是一个备注文件,对项目开发过程中需要注意的地方进行一些说明。

src 文件夹结构

src 文件夹里的文件夹设置是灵活的,可以根据自己的习惯进行,不必雷同。下面是这次项目的结构:

vue项目总结之文件夹结构配置详解

  • assets: 放置静态资源,包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件,是因为要在组件的 css 标签里加入 ‘scoped‘ 标记,将其作用范围限制在此组件以及调用它的父级组件中,避免污染全局样式;
  • components: 放置通用模块组件。项目里总会有一些复用的组件,例如弹出框、发送手机验证码、图片上传等,将它们作为通用组件,避免重复工作;
  • http: 放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件;
  • mixins: 放置混合选项的文件。具体来说,相当于是公用函数的集合,在组件中引用时,可以作用于组件而不必书写重复的方法;
  • pages: 放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构,再引入通用模块组件,形成完整的页面;
  • router: 放置路由设置文件,指定路由对应的组件;
  • store: 放置 vuex 需要的状态关联文件,设置公共的 state、mutations 等;
  • App.vue: 入口组件,pages 里的组件会被插入此组件中,此组件再插入 index.html 文件里,形成单页面应用;
  • main.js: 入口 js 文件,影响全局,作用是引入全局使用的库、公共的样式和方法、设置路由等。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery ready函数滥用分析
Feb 16 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
vue.js简单配置axios的方法详解
Dec 13 #Javascript
关于Vue单页面骨架屏实践记录
Dec 13 #Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 #Javascript
node vue项目开发之前后端分离实战记录
Dec 13 #Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 #Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 #Javascript
Angular4编程之表单响应功能示例
Dec 13 #Javascript
You might like
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php计算年龄精准到年月日
2015/11/17 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
拖动一个HTML元素
2006/12/22 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
python单链表实现代码实例
2013/11/21 Python
12步教你理解Python装饰器
2016/02/25 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
婚礼司仪主持词
2014/03/14 职场文书
小学数学教师研修日志
2015/11/13 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
基于Python实现流星雨效果的绘制
2022/03/18 Python