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

1、使用vue-cli构建骨架

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

b：使用命令创建项目 vueinit webpackyou_project_name

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

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

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

3、安装elementui

npm i element-ui -S

importVue from'vue'

importElementUI from'element-ui'

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

importApp from'./App.vue'

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

4、启动项目

启动生成模式临时服务器 npmstart

编译: 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: 设置骨架

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