学成在线（day02）

CMS前端开发（Vue.js 与Webpack研究）

工程结构

根目录下

 

模块目录

 

项目开发的逆向跳转Vue

1.基本构建

1.1基本构建

2.Api 下一步的构建

单页面应用介绍

router 文件夹 及 子目录

这个文件夹里的是整个vue项目的路由，vue 是单页面应用的代表，这里面就是设置一个一个组件的地址的文件

Element-UI介绍。

本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
件库，表格的标签使用的是element-ui

 

 

Webpack研究

安装Webpack

使用vue.js开发大型应用需要使用webpack打包工具。Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

好处：

1、模块化开发 程序员在开发时可以分模块创建不同的js件，减少了http的请求次数。 webpack可以实现按需打包，为了避免出

2、 编译typescript、ES6等高级js语法 随着前端技术的强大，开发中可以使用jawebpack可以将打包文件转换成浏览器

3、CSS预编译 webpack允许在开发中使用Sass 和 Les语法编译成浏览器可识别的css语法。

webpack的缺点： 1、配置有些繁琐 2、文档不丰富

安装node.js

webpack基于node.js运行，node.js是JavaScript的运行环境，实质是对Chrome v8引擎进行了封装。

安装NPM

他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件。

前后端请求响应流程