前后台项目开发环境搭配

前后台项目开发

前端项目：

前段时间时间开发了一个前台项目（直接给用户使用），还需要开发一个后台项目（CMS管理系统）

后端项目：

整个拉钩后端的服务器

搭建前端的CMS项目开发环境

选用webpack作为工程化工具，webpack是一个基于配置的前端模块化打包工具。

需要先去下载webpack

全局安装了webpack，执行命令的时候就可以直接webpack来执行了，如果全局没有装，只在本地装包，只能执行./node_modules/bin/webpack …

为了使用更方便，一般会全局安装，webpack目前版本为4.X，需要搭配webpack-cli使用

在本地也需要安装 webpack

webpack的使用

可以直接通过webpack命令来执行打包操作，通过 --env来配置一些参数

webpack的基本命令：

–help 查看所有的命令

–mode development production none

-o 配置出口

–config 配置 配置文件

一般都是通过配置文件来进行使用：

webpack默认会根据webpack.config.js中的配置进行模块化打包

插件Plugin

plugin是解决loader做不了的事情的，现在准备让html页面出现在输出目录中

使用 html-webpack-plugin

插件和入口出口一样需要直接在配置文件中进行配置,在其中放入插件的实例就相当于在使用插件

copy-webpack-plugin 可以将文件进行复制

dev server

我们使用webpack-dev-server工具来替代webpack，在启动的时候就会开启热更新服务

其实工程化工具不止gulp/webpack/grunt，还有很多，比如parcel， rollup

css/scss/…等文件的处理

在开发的时候可以在js文件中引入css/scss文件，但是我们需要使用loader来处理

css-loader 可以将引入到js中的css模块中的代码放入到js中

style-loader 可以将js中的css代码放入到style标签中去

sass-loader 可以将sass代码编译成css代码

针对图片，我们直接将图片打包（复制）到输出目录，直接引入，也可以模块化使用

url-loader 基于file-loader，专业处理图片，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

babel-loader 编译ES高级语法

使用前端框架来快速搭建项目结构

​
使用基于bootstrap的ui框架 adminLTE 来快速开发CMS应用

准备采用 RMVC§ 结构实现单页面开发

使用sme-router 工具实现前端路由

sme-router的api使用和express很相似

使用express搭建后端项目结构

生成express应用程序

npm install express-generator -g

express项目解析：

app.js 创建应用程序
bin/www.js 开启服务

后端也需要使用架构思想 MVC views（给前端响应的）controllers model（提供数据）

​

​