springboot综合项目练习八cms系统前端项目搭建和环境准备

一. 相关内容

项目码云地址:https://gitee.com/chenhaotao1992/sc-ui-pc-sysmanage.git

选择分支:part01

二. 环境和准备

项目环境:

jdk1.8

node.js和webpack:https://blog.csdn.net/chenhaotao/article/details/86619148

MongoDB

开发工具:

webstorm:https://blog.csdn.net/chenhaotao/article/details/86619236

Studio-3T:

准备mongodb数据:集成springboot mongodb:

三. 实现步骤

我的cms前端项目是使用Vue-cli脚手架创建， Vue-cli是Vue官方提供的快速构建单页应用的脚手架，github地址：https://github.com/vuejs/vue-cli , 你也可以在我的码云地址选择part01分支下载项目导入.

四.项目结构介绍

1. package.json类似maven的pom文件,记录了工程所有依赖，及脚本命令例如dev和build命令

   2.webpack.base.conf.js就是webpack.config.js的配置文件

   3.main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等

   src目录下各个文件夹作用:

   assets：存放一些静态文件，如图片。

   base：存放基础组件

   base/api：基础api接口

   base/component：基础组件，被各各模块都使用的组件

   base/router：总的路由配置，加载各模块的路由配置文件。

   common：工具类

   component：组件目录，本项目不用。

   mock：存放前端单元测试方法。

   statics：存放第三方组件的静态资源

   vuex：存放vuex文件，本项目不使用

   static：与src的平级目录，此目录存放静态资源

   module：存放各业务模块的页面和api方法。

   module/home:项目生成的一个参考模块,每个模块目录下又有四个目录:page页面目录,存放.vue文件,router路由目录存放index.js,api目录存放对应模块接口请求规则js,已经公共目录components