文章目录
1. 前言
注意：本项目所有的项目涉及到内容及代码已开源，Gitee开源地址：https://gitee.com/19931024/pmp.git
在前面的章节，已经做好了前端的开发准备了，有兴趣的童鞋可以参考下：
本章开始讲解仿vue-element-admin框架开发。
2. 可复用文件分析首先看看本项目和element-admin项目的结构图：
| PMP知识管理系统 | vue-element-admin |
|---|---|
 |
 |
对比两个项目的结构，可以看到基本是一致的，这里相同的文件有：
pacakge.json项目总配置文件public文件夹里面的favicon.icon及index.html文件src文件夹下的main.js文件
本文主要讲解者两个文件。注意了，在上一篇博客《PMP知识系统（03）- 前端架构》已经把所需要的依赖在package.json都依赖好了。
2.1 index.html
所有vue项目的首页文件基本都是没有内容的，编译代码后都会自动注入，所以直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2.2 main.js
main.js是本文的核心，里面已经描述了项目需要的依赖，可以看做是程序的入口，主要加载组件、初始化等操作。贴上完整代码分析：
import Vue from 'vue'
import Cookies from 'js-cookie'
import 'normalize.css/normalize.css' // a modern alternative to CSS resets
import Element from 'element-ui'
import './styles/element-variables.scss'
import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
import '@/styles/index.scss' // global css
import App from './App'
import store from './store'
import router from './router'
import './icons' // icon
import './permission' // permission control
import './utils/error-log' // error log
import * as filters from './filters' // global filters
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online ! ! !
*/
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
Vue.use(Element, {
size: Cookies.get('size') || 'medium', // set element-ui default size
locale: enLang // 如果使用中文，无需设置，请删除
})
// register global utility filters
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
2.2.1 依赖分析
可以看到依赖了如下内容，这里作详细的描述：
- vue：这个不用多说了，是
vue项目必须依赖的 - js-cookie ：
js-cookie是一个简单的,轻量级的处理cookies的js API - normalize.css/normalize.css：是一个可以定制的
CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一 - element-ui：这个不用解析了，是本项目的核心
ui框架 - /styles/element-variables.scss：这是全局的样式-
element-variables - element-ui/lib/locale/lang/en：这是
element-ui里面的国际化语言包 - /styles/index.scss：这也是全局的样式-
index - /App：这是入口页面
- /store：全局 store管理
- /router：路由相关
- /icons：项目所有 svg icons
- /permission：权限管理
- /utils/error-log：全局公用方法-
error-log - /filters：全局 filter`
2.2.2 加载分析
加载的主要代码如下，解析在代码块：
// mock相关代码
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
Vue.use(Element, {
size: Cookies.get('size') || 'medium', // 设置element-ui默认文字大小
locale: enLang // 如果使用中文，无需设置，请删除
})
// 注册全局过滤器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
//阻止显示生产模式的消息
Vue.config.productionTip = false
// 模板写法，此处不再详述
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
3.1 改造main.js
这里我重新把非必要的文件删除了，只留下了样式相关的内容。修改后的main.js文件如下：
import Vue from 'vue'
import Cookies from 'js-cookie'
import Element from 'element-ui'
import 'normalize.css/normalize.css' // a modern alternative to CSS resets
import './styles/element-variables.scss'
import '@/styles/index.scss' // global css
import './icons' // icon
import App from './App'
Vue.config.productionTip = false
Vue.use(Element, {
size: Cookies.get('size') || 'medium'
})
new Vue({
el: '#app',
render: h => h(App)
})
3.2 添加需要的文件
执行以下命令：
# 安装依赖
cnpm install
# 启动程序
npm run serve
预料之中会报错，报错内容如下，因为vue-element-admin的一些文件没有复制过来：
我们把vue-element-admin项目的styles（全局样式）、icons（项目所有的图标）、/components/SvgIcon文件夹copy到我们的项目，里面的内容如下：
| styles | icons | SvgIcon |
|---|---|---|
 |
 |
 |
继续跑一遍程序：
npm run serve
报错也在意料之中的，我们把红框里面依赖到的文件夹，从vue-element-admin复制过来:
最终目录如下：
3.3 运行程序
程序最终跑起来了
浏览器输入：http://localhost:8080/
可以看到集成elementUI成功！
至此，我们已经把ElementUI及其样式集成进我们的项目了，具体的代码有兴趣的同学可以clone下来看看：https://gitee.com/19931024/pmp.git
本文完！
