如何搭建+配置+基础布局--基于elementui+vue的de
(1)配置vue init webpack demoTest(后面的信息,若不是项目需要指定,可以直接默认回车确认)(可以在自己指定路径也可以直接装在默认c盘)
![](https://img.haomeiwen.com/i2602441/871e225f25645777.png)
(2)新建好后,出现的文件夹项目
![](https://img.haomeiwen.com/i2602441/8db4e4e172489a4b.png)
(3)运行项目npm run start
![](https://img.haomeiwen.com/i2602441/bfe15ac735006b2b.png)
(4)运行项目,可能会出现这个报错bug(因为是vue项目里设置elist规范(若换行定格不规范就会报错,其实不大影响,只是规范方面报错,为了规范你写法),若需要去除掉这个提示规范,解决方法:
在config/index.js里配置信息useEslint设置为true
![](https://img.haomeiwen.com/i2602441/4869d4ea5ba78cd5.png)
(5)(如果需要打包项目)运行npm run build (打包后项目出现以下的文件夹)
![](https://img.haomeiwen.com/i2602441/68ddebf0a7c4a61c.png)
(6)项目文件放置(只是个人这样设置,方便开发):
![](https://img.haomeiwen.com/i2602441/7cce835463ce1c24.png)
(7)项目开发--用什么配置什么
1)引入重置css文件样式
在mainjs引入重置样式(重置样式文件放置在assets文件里)
![](https://img.haomeiwen.com/i2602441/0c296de808fed05e.png)
2)element.ui安装与配置
先配置插件npm install element-ui --save-dev
![](https://img.haomeiwen.com/i2602441/527cbb50167f1b47.png)
在main.js文件中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
![](https://img.haomeiwen.com/i2602441/b00e517c227b4879.png)
3)less安装与配置
npm install less less-loader --save-dev
![](https://img.haomeiwen.com/i2602441/0c819c35976e0cf2.png)
在webpack.base.conf.js里面配置:
![](https://img.haomeiwen.com/i2602441/6a022f52651319cd.png)
4)axios安装与配置
![](https://img.haomeiwen.com/i2602441/6ec4fa1413278730.png)
第一种方式:引入全局使用
![](https://img.haomeiwen.com/i2602441/0a4050890087ab4a.png)
第二种方式:封装axios文件后设置使用
在需要用到这请求的组件里面引入
![](https://img.haomeiwen.com/i2602441/13c9fc995e5cc640.png)
5)安装与配置json-server(后台暂时没接口过来,可以虚拟一个本地服务器),也可以结合postman接口测试来使用
全局安装
![](https://img.haomeiwen.com/i2602441/a254d7cb8d685664.png)
cd到对应目录,然后再局部安装
![](https://img.haomeiwen.com/i2602441/900ff7f65cc783da.png)
db.json模板(在项目里面新建的json文件)
![](https://img.haomeiwen.com/i2602441/8b1c0444213088c7.png)
在package.json里面输入script脚本命令行mock(mock这名字随意可以改)
"mock":“json-server db.json --port 8080”
![](https://img.haomeiwen.com/i2602441/452ea68af441658b.png)
运行npm run mock
![](https://img.haomeiwen.com/i2602441/26beb7447fd31127.png)
![](https://img.haomeiwen.com/i2602441/bd9ac2ac350b8546.png)
安装后配置信息和配置代理
在webpack.dev文件里
const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use('/api', apiRouter)
apiServer.listen(8081, () => {
console.log('JSON Server is running')
})
在config/index.js文件里配置
proxyTable: {
'/api':'http://localhost:8081/', //通过本地服务器将你的请求转发到这个地址
changeOrigin:true,//设置这个参数可以避免跨域
},
结合axios使用:
![](https://img.haomeiwen.com/i2602441/5cd44001b8d4eabb.png)
(8)基础布局
1)根组件app.vue,路由挂载
![](https://img.haomeiwen.com/i2602441/1e167b522dba0d87.png)
2)home.vue组件:
![](https://img.haomeiwen.com/i2602441/77657053ddc9b00f.png)
3)head.vue头部组件
![](https://img.haomeiwen.com/i2602441/8adb8dc05aa77d79.png)
效果图
![](https://img.haomeiwen.com/i2602441/7a02a11efc07a91b.png)
4)menu左菜单
![](https://img.haomeiwen.com/i2602441/bc56aa1852d144bd.png)
路由设置
![](https://img.haomeiwen.com/i2602441/42edc13a52369276.png)
效果图
![](https://img.haomeiwen.com/i2602441/a7291f99fb1cf1b1.png)
…基本的固定布局搭好
(9)用git,上传代码到分支
1)git add .
2)git commit -m ""
3)git checkout 分支名称(切换到分支)(若查看分支 git branch)
4)git pull origin 分支名称(如果是主干,一般git pull就可以)
5)git push origin 分支名称(如果是主干,则是master)
这是本人搭建一个demo起步,然后可以在搭建好的项目基础上往下开发了;记录项目起步的准备与部分流程,为了方便自己日后查看,同时分享给大家,若写的有不好或有错误,请大神体谅与纠正,谢谢大家的阅读。
demo源码(github地址):https://github.com/lilyping/elementUi_vue_demo
本文作者lilyping
越努力,越幸运
原文链接:https://www.jianshu.com/u/3908e601f4ec
微信公众号:BestLilyPing
github:https://github.com/lilyping
Demos源码地址:https://github.com/lilyping