手记

如何搭建+配置+基础布局--基于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



作者:lilyping
链接:https://www.jianshu.com/p/cf2444b1232d


1人推荐
随时随地看视频
慕课网APP