文件夹结构配置< titlesplit >前段时间用vue开发后台管理系统。在摸索的过程中，对vue本身以及模块化、标准化开发有了更深的理解。现记录下来，希望对其他需要开发项目的人有更好的理解帮助。项目配置首先，在确定了要使用的框架和组件库之后，首先要对它们有一个大概的了解，这样文档就基本熟悉了。本次开发用到的有：vue、vuex、axios、elementUI。然后就可以按照官方的指导使用vue-cli搭建一个vue项目，并尝试根据项目中的以上文档进行修改加深理解：#安装依赖库，建议指定vue和elementversions避免版本升级带来的意外bug$npminstallvue@2.1.6element-ui@1.4.6vuexaxios#全局安装脚手架$npminstall-gvue-cli#根据webpack模板my-project创建新项目$vueinitwebpackmy-project#进入项目目录$cdmy-project#安装依赖$npminstall#运行项目$npmrundev运行后出现如下页面说明项目环境搭建成功：项目结构如下构建成功，用编辑器打开项目目录，大致如下结构：相关文件和文件夹的含义：构建文件夹：包含webpack开发打包的相关设置，包括入口文件、输出文件、使用的模块等；config文件夹：主要指定开发打包时的静态资源路径、需要压缩的文件类型、开发用端口号、开发用虚拟服务器跨域请求接口等。node_modules：项目的依赖库；src文件夹：我们主要操作的地方，组件的添加修改等都是在这个文件夹中操作的，下面会详细介绍；static文件夹：静态资源文件夹，不会改变资源直接复制到最终打包目录下（默认为dist/static）；.babelrc：使用babel的配置文件，用于设置转码规则和插件；.editorconfig：代码规范文件，指定使用空格或制表符缩进，缩进长度是两位还是四位，如果使用需要在编辑器中下载相应的插件；.eslintignore：指定被eslint忽略的文件；.eslintrc：配置eslint的检测规则，强制按照规则编写代码；.gitignore：指定被git忽略的文件，所有的git操作都不会对它们生效；.postcssrc：指定使用的css预编译器，默认配置autoprefixer，自动补全浏览器前缀；图标。ico：浏览器标签页标题旁边的小图标，需要我们自己粘贴；index.html：首页文件，当项目运行时，我们在src文件夹下生成的组件会自动插入到这个文件中；LICENSE：项目声明的许可证；package-lock.json：node_modules或package.json变化时自动生成的文件。该文件的主要作用是判断当前安装包的依赖关系，以便在后续重新安装时产生相同的依赖关系，同时忽略项目开发过程中某些依赖关系已经发生的更新；package.json：在项目开发和生产环境中指定。需要使用依赖库；README.md：相当于一个remark文件，说明了项目开发过程中需要注意的一些要点。src文件夹结构src文件夹中的文件夹设置比较灵活，可以根据自己的习惯来做，不一定要一样。下面是这个项目的结构：assets：放置静态资源，包括公共的css文件、js文件、iconfont字体文件、img图片文件等资源文件。之所以是publiccss文件，是为了在组件的css标签中加入'scoped'标签，将其作用域限制在本组件和调用它的父组件内，避免污染全局样式；components：放置常用的Module组件。项目中总会有一些可复用的组件，比如弹框、发送手机验证码、图片上传等，将它们作为通用组件使用，避免重复劳动；http：放置后台api相关的文件。有axios库的实例配置文件，以及使用配置好的axios实例访问api获取数据的函数集合；mixins：用于放置混合选项的文件。具体来说，它相当于一个公共函数的集合。在组件中引用时，可以作用于组件，而无需编写重复的方法；pages：放置主页的组件。比如登录页面，用户信息页面等。通常这里的组件写一些结构，然后引入公共模块组件，组成一个完整的页面；router：放置路由设置文件，指定路由对应的组件；store：放置vuex需要的state关联文件，设置publicstate，mutations等；App.vue：入口组件，pages中的组件都会被插入到这个组件中，这个组件会被插入到index.html文件中，形成一个单页应用；main.js：入口js文件，影响全局，作用是引入全局使用的库，常用样式方法，设置路由等，文件夹配置总结到此结束。下一篇文章将对src文件夹下具体文件的配置和示例进行总结。有需要的可以去https://segmentfault.com/a/11...看看look。
