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

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、建立项目的骨架


webpack+vue+elementui构建后台管理系统_第1张图片

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)

j:https://shop136014658.taobao.com/ 

你可能感兴趣的:(webpack+vue+elementui构建后台管理系统)