webpack+vue+elementui构建后台管理系统

git地址：https://github.com/awsky/aw-vue-admin

演示地址:https://github.com/awsky/aw.github.io/tree/master/aw/index.html（git比较慢多等会）

1、使用vue-cli构建骨架

a：全局安装vue-cli npm install --global vue-cli

b：使用命令创建项目 vue init webpack you_project_name

c : 加载模块 npm install或 cnpm install(淘宝镜像安装)

参考资料: http://www.jianshu.com/p/2769efeaa10a

2、安装css style loader(css文件可以作为模块导入)

cnpm install css-loader style-loader --save-dev

3、安装elementui

npm i element-ui -S

importVuefrom'vue'

importElementUIfrom'element-ui'

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

importAppfrom'./App.vue'

Vue.use(Element, { size:'small' })

4、启动项目

启动生成模式临时服务器 npm start

编译: npm run build

5、建立项目的骨架

a: 在main.js页面引入外部文件 css和js
import './assets/css/base.css'
import './assets/css/common.css'
import './assets/css/img.css'
b: 建立GuyuAdminNavbar.vue菜单和GuyuAdminHeader.vue头部模板
c: 在App.vue引入GuyuAdminNavbar和GuyuAdminHeader
import GuyuAdminNavbar from '@/components/GuyuAdminNavbar'
import GuyuAdminHeader from '@/components/GuyuAdminHeader'
d: 设置骨架
<template>
	  <div id="app">
	  		<!-- 头部  -->
	    	<GuyuAdminHeader></GuyuAdminHeader>
	    	<main class="relative main">
	    			<!-- 菜单  -->
	    			<GuyuAdminNavbar class="left-menu"></GuyuAdminNavbar>
	    			<!-- 具体内容  -->
		  			<router-view class="main-contain"/>
	    	</main>
	  </div>
</template>

6、参考文档

a:nodejs npm基础学习 ( http://www.runoob.com/nodejs/nodejs-tutorial.html)

b：webpack学习（http://www.jianshu.com/p/42e11515c10f）

c: vue学习（https://cn.vuejs.org/v2/guide/events.html）

d: vue-router学习（https://router.vuejs.org/zh-cn/installation.html）

e: 基于vue-cli快速构建(http://www.jianshu.com/p/2769efeaa10a)

f: element ui 前端桌面框架（http://element-cn.eleme.io/#/zh-CN/component/quickstart）

g: vue-axios中文说明进行数据请求（https://www.kancloud.cn/yunye/axios/234845）

h: vue-scroller 上拉加载下拉刷新插件

i: 引入jquery （https://segmentfault.com/a/1190000007020623）

秒客网