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 相关文章推荐
javascript StringBuilder类实现
Dec 22 Javascript
js 图片缩放(按比例)控制代码
May 27 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
微信JSSDK上传图片
Aug 23 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 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
PHP 编写的 25个游戏脚本
2009/05/11 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php获取远程文件大小
2015/10/20 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
JS的get和set使用示例
2014/02/20 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
理解Python中的类与实例
2015/04/27 Python
python实现简单的socket server实例
2015/04/29 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python实现批处理文件
2020/07/28 Python
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
如何转换一个字符串到enum值
2014/04/12 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
模范家庭事迹材料
2014/02/10 职场文书
采购求职信
2014/03/17 职场文书
安全横幅标语
2014/06/09 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android