Day02_CMS前端开发

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

参考链接：https://www.cnblogs.com/artwalker/p/13387386.html

2 CMS前端工程创建 2.1 导入系统管理前端工程

CMS系统使用Vue-cli脚手架创建， Vue-cli是Vue官方提供的快速构建单页应用的脚手架，github地址： https://github.com/vuejs/vue-cli（有兴趣的同学可以参考官方指导使用vue-cli创建前端工程），本项目对Vue-cli 创建的工程进行二次封装，下边介绍CMS工程的情况。

2.2.1 工程结构

如果我要基于Vue-Cli创建的工程进行开发还需要在它基础上做一些封装，导入课程资料中提供Vue-Cli封装工程。 将课程资料中的xc-ui-pc-sysmanage.7z拷贝到UI工程目录中(和xc-ui-pc-static-portal目录并列)，并解压，用WebStorm打开xc-ui-pc-sysmanage目录。

2.2.2 package.json

package.json记录了工程所有依赖，及脚本命令：

开发使用：npm run dev 打包使用：npm run build 2.2.3 webpack.base.conf.js

webpack.base.conf.js就是webpack的webpack.config.js配置文件，在此文件中配置了入口文件及各种Loader。

webpack是通过vue-load解析.vue文件，通过css-load打包css文件等。

2.2.4 main.js

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

index.html是模板文件。

2.2.5 src目录

src目录下存放页面及js代码。

assets：存放一些静态文件，如图片。 base：存放基础组件 base/api：基础api接口 base/component：基础组件，被各模块都使用的组件 base/router：总的路由配置，加载各模块的路由配置文件 common：工具类 component：组件目录，本项目不用 mock：存放前端单元测试方法 module：存放各业务模块的页面和api方法 下级目录以模块名命名，下边以cms举例： cms/api：cms模块的api接口 cms/component：cms模块的组件 cms/page： cms模块的页面 cms/router：cms模块的路由配置 statics：存放第三方组件的静态资源 vuex：存放vuex文件，本项目不使用 static：与src的平级目录，此目录存放静态资源 它与assets的区别在于，static目录中的文件不被webpack打包处理，会原样拷贝到dist目录下 2.2 单页面应用介绍

什么是单页应用？

单页应用（英语：single-page application，缩写SPA）是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。尽管可以用位置散列或HTML5历史API来提供应用程序中单独逻辑页面的感知和导航能力，但页面在过程中的任何时间点都不会重新加载，也不会将控制转移到其他页面。与单页应用的交互通常涉及到与网页服务器后端的动态通信。

单页面应用的优缺点：

优点：

1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。 2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：

1、首页加载慢 单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则 用户体验不好。 2、SEO不友好 SEO（Search Engine Optimization）的意思是搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

总结：

本项目的门户、课程介绍不采用单页面应用架构去开发，对于需要用户登录的管理系统采用单页面开发。

3 CMS前端页面查询开发 3.1 页面原型 3.1.1 创建页面 3.1.1.1 页面结构

在model目录创建 cms模块的目录结构

在page目录新建page_list.vue