elementui 搭建布局页面路由_如何搭建+配置+基础布局--基于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起步，然后可以在搭建好的项目基础上往下开发了；记录项目起步的准备与部分流程，为了方便自己日后查看，同时分享给大家，若写的有不好或有错误，请大神体谅与纠正，谢谢大家的阅读。