如何搭建+配置+基础布局--基于elementui+vue的demo项目起步

（1）配置vue init webpack demoTest（后面的信息，若不是项目需要指定，可以直接默认回车确认）（可以在自己指定路径也可以直接装在默认c盘）

eui_vue.png

（2）新建好后，出现的文件夹项目

eui_vue2.png

（3）运行项目npm run start

eui_vue3.png

（4）运行项目，可能会出现这个报错bug（因为是vue项目里设置elist规范(若换行定格不规范就会报错，其实不大影响，只是规范方面报错，为了规范你写法），若需要去除掉这个提示规范，解决方法：

在config/index.js里配置信息useEslint设置为true

eui_vue4.png

（5）（如果需要打包项目）运行npm run build (打包后项目出现以下的文件夹)

eui_vue5.png

(6）项目文件放置（只是个人这样设置，方便开发）：

eui_vue6.png

（7）项目开发--用什么配置什么

1）引入重置css文件样式

在mainjs引入重置样式（重置样式文件放置在assets文件里）

eui_vue7.png

2）element.ui安装与配置

先配置插件npm install element-ui --save-dev

eui_vue8.png

在main.js文件中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

e.png

3）less安装与配置

npm install less less-loader --save-dev

eui_vue9.png

在webpack.base.conf.js里面配置：

eui_vue10.png

4）axios安装与配置

eui_vue11.png

第一种方式：引入全局使用

eui_vue12.png

第二种方式：封装axios文件后设置使用

在需要用到这请求的组件里面引入

eui_vue13.png

5）安装与配置json-server（后台暂时没接口过来，可以虚拟一个本地服务器），也可以结合postman接口测试来使用

全局安装

eui_vue14.png

cd到对应目录，然后再局部安装

eui_vue15.png

db.json模板（在项目里面新建的json文件）

eui_vue16.png

在package.json里面输入script脚本命令行mock(mock这名字随意可以改)
"mock":“json-server db.json --port 8080”

eui_vue17.png

运行npm run mock

eui_vue18.png

eui_vue19.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使用：

eui_vue20.png

（8）基础布局

1）根组件app.vue，路由挂载

eui_vue21.png

2)home.vue组件：

eui_vue22.png

3）head.vue头部组件

eui_vue23.png

效果图

eui_vue24.png

4）menu左菜单

eui_vue25.png

路由设置

eui_vue26.png

效果图

eui_vue27.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