利用Vue和Element UI搭建后台管理项目结构

环境安装

1. 安装Node.js和Vue-cli自动构建工具
2. 使用Vue脚手架工具Vue-cli创建项目结构

Vue init webpack projectName

选择安装Vue-router和Eslint语法校验工具
3. 这时候一个简单的Vue框架结构就搭好了；

npm install
npm run dev

此时就可以出现一个Demo页面了。

ElementUI引入

为了引入ElementUI 组件来开发，因此在main.js中引入ElementUI组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

组件化开发

采用组件化开发，就要考虑将封装的组件放置在哪里，这里对目录结构稍作修改，将由路由选择的组件放在page文件夹里，将我们自己封装的可复用的组件放置在componenets文件夹里。同时，需要注册Vue组件，我们采用一次性将所有组件全局注册的方法。
在Webpack中，有一个require.context()方法，该方法可以按照一定的规则来引入文件。

/*在components文件里新建一个index.js文件，该文件导出一个方法，该方法调用require.context()方法引入所有的.vue文件和文件夹，然后读取文件名，以该文件名作为组件的名称，注册到Vue中
在main.js中引入index.js文件，调用index.js中导出的方法，一次性将components文件夹里所有的组件注册到Vue中*/

//主要方法代码如下
export function ComponentReq (Vue) {
    const r = require.context('./', true, /.vue$/)
    r.keys().forEach(key => {
        console.log(r(key))
        Vue.component(r(key).default.name, r(key).default)
    })
}