文章目录如下：项目效果预览地址项目开源代码基于vue模块化开发后端系统-基于vue模块化开发后端系统的准备工作-基于构建项目关于vue模块现代化开发后台系统-权限控制前言在熟悉了上一篇文章中提到的准备工具之后，现在开始搭建自己的项目，这是一个VUE项目，然后使用vue-cli进行搭建，进入下面的命令vueinitwebpackxxxx在构建过程中，因为之前提到需要规范代码，所以在eslint的问题中，应该回复Y。一切都结束后，我们来看一下目录结构项目目录结构。当然这个目录已经添加了一些注释（added），没有注释的也是一样├──build//构建相关├──config//配置相关├──dist//打包后相关├──node_modules//npm相关包├──src//代码│├──api//请求接口文件（添加）├──assets//静态资源（图片、样式等）│├──components//全局publiccomponents│├──directives//globaldirectives(add)│├──mock//projectmocksimulationdata(add)│├──pages//相关页面（Add）│├──router//routing│├──store//店铺管理（添加）│├──App.vue//入口页面│└──main.js//入口加载组件初始化等├──static//第三方不打包资源├──.babelrc//babel-loader配置├──.eslintignore//eslint忽略项├──.eslintrc.js//eslint配置项├──.postcssrc.js//postcss配置项├──.gitignore//git忽略项目├──index.html//htmltemplate└──package.json//package.json先分析这些，如果没有看到node_modules文件夹，暂时不用管，再往下看添加api、directives、mock、pages,依次存放几个文件夹,各自的功能api:存放项目的接口simulationdirectives:存放项目的全局命令mock:存放使用mock.js模拟的数据pages:存放与项目相关的页面store:存放statemanagement看了这些，其实没什么好看的，这些可以随便命名，想怎么弄就怎么弄，接下来说说package.jsonpackage.json这个是npm用来管理项目包的文件.打开此文件并找到属性devDependencies。我们在里面添加项目需要的包，例如："axios":"^0.17.0",//请求工具"js-cookie":"^2.2.0",//cookie"lodash":"^4.17.4",//函数库"mockjs":"^1.0.0",//模拟数据工具"vuex":"^3.0.1",//状态管理工具"vee-validate":"^2.0.0"//表单验证工具如果你的文件已经配置好了，那么直接输入下面的命令npminstall--save-dev当你输入这个的时候，你会发现下载非常非常慢，为什么？因为你下载的包可能是国外的，所以~~我们添加淘宝镜像，如下npminstall--save-dev--registry=http://registry.npm.taobao.org当然，如果你是一一补充一下，我一般是先查看这个包的版本，因为有时候有些包是beta版本，命令如下：npmshowpackagenameorpluginnameversions--json然后输入如下命令：npminstallpackagenameor插件名称@version--save-dev--registry=http://registry.npm.taobao.org这个时候我们只需要喝杯茶，安安心心的做个美男美少女吧~~下载完成可以看到个人修改了node_modules文件夹，仅供参考。完成以上步骤后，还需要修改配置。修改端口，首先找到config目录，然后找到index.js文件，打开找到dev配置项，由于默认端口是8080，为了防止和其他项目冲突，找到端口选项，和修改成自己喜欢的端口运行后浏览器自动打开项目，找到如上的dev配置项，然后找到autoOpenBrowser。默认为false，现在改为true。打包后加载资源的问题就是打包后出现图片和样式出不来的问题。不知道你有没有同样的问题。我做了如下修改：在config目录下找到index.js文件，打开找到build配置项，添加assetsPublicPath:'./'然后在build目录下找到utils.js文件，然后找到以下代码：returnExtractTextPlugin.extract({use:loaders,fallback:'vue-style-loader',})在配置项中添加publicPath:'../../'总结仅供参考。如果可以暂时忽略，同样的问题出现后回头看也是可以的，不影响项目的建设。构建完成后，让我们开始编码吧！文章项目效果预览地址项目开源代码基于vue模块化开发后台系统-基于vue模块化开发后台系统的准备工作-基于vue模块化开发后台系统搭建项目-权限控制
