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

猜你喜欢

转载自blog.csdn.net/chenhaotao/article/details/86634055