学成在线第2天讲义-CMS前端开发1Vue.js与Webpack研究参考：学成在线-Vue.js与Webpack.pdf2CMS前端工程创建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工程目录中，并解压，用WebStorm打开xc-ui-pc-sysmanage目录。北京市昌平区建材城西路金燕龙办公楼一层电话：400-618-90902.2.2package.jsonpackage.json记录了工程所有依赖，及脚本命令：开发使用：npmrundev打包使用：npmrunbuild2.2.3webpack.base.conf.jswebpack.base.conf.js就是webpack的webpack.config.js配置文件，在此文件中配置了入口文件及各种Loader。北京市昌平区建材城西路金燕龙办公楼一层电话：400-618-9090webpack是通过vue-load解析.vue文件，通过css-load打包css文件等。2.2.4main.jsmain.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。index.html是模板文件。2.2.5src目录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模块的页面北京市昌平区建材城西路金燕龙办公楼一层电话：400-618-9090cms/router：cms模块的路由配置statics：存放第三方组件的静态资源vuex：存放vuex文件，本项目不使用static：与src的平级目录，此目录存放静态资源它与assets的区别在于，static目录中的文件不被webpack打包处理，会原样拷贝到dist目录下。2.2单页面应用介绍什么是单页应用？引用百度百科：单页面应用的优缺点：优点：1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。2、适合前后端分离开发，服务端提供h...
