【 CMS 前端工程导入 】

1 CMS前端工程导入

1.1 导入系统管理前端工程

CMS系统使用Vue-cli脚手架创建， Vue-cli是Vue官方提供的快速构建单页应用的脚手架，github地址：https://github.com/vuejs/vue-cli ，本项目对Vue-cli创建的工程进行二次封装，下边介绍CMS工程的情况。

1.1.1 工程结构

如果我要基于Vue-Cli创建的工程进行开发还需要在它基础上作一些封装，导入资料中提供Vue-Cli封装工程。

将资料中的 xc-ui-pc-sysmanage.7z 拷贝到 UI 工程目录中，并解压，用WebStorm 打开 xc-ui-pc-sysmanage 目录。

1.1.2 webpack.base.conf.js

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

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

1.1.3 main.js

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

index.html是模板文件。

1.1.4 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目录下。

1.1.5 package.json

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

开发使用：npm run dev
打包使用：npm run build

双击 dev ，启动，浏览器访问：http://localhost:11000/#/

如果启动报错，安装了两次不同版本nodejs后，运行vue会报错，删除依赖：

然后执行 cnpm install，重新安装依赖：