vue elemenui 开源管理后台框架

之前虽然有用vue+elementUI写过后台管理项目，但是都是在别人已经搭建好的框架上调用接口进行数据增删改查，从没有自己新建过项目，最近有时间，就想着自己自己从头到尾的过一遍，这里写的都是自己觉得需要注意的，没有一步步的进行介绍，有不对的还请多指教

一、创建项目

使用Vue-cli 3.0搭建Vue项目，如果你用的cli是2.几版本，新建项目用

vue init webpack 你的项目名

如果是3.0版本，创建新项目用

vue create 你的项目名

之后需要选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化等），基本上一路enter就行了，这里要特别注意一下关于格式化（即ESLint ）,不想写代码时随时随地因为没有注意格式而报错修改的话就选择n（no）,反正我是吃过这个的亏
创建项目完成后，安装依赖（两种路径安装依赖）
1，可以直接在cmd里安装，注意这里要先转到新建项目所在目录里面，此处cmd会给提示,照着做就好,

cd 目录
npm install

2，用vscode打开项目，启动终端，安装依赖

npm install

到此项目创建完成

二、安装elementui插件

npm install element-ui --save

在main.js里引入并应用

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

项目需要网络请求可添加axios插件，我这里只是搭项目过流程，就没有安装这个

npm install axios --save

运行项目

npm run dev

运行成功，在地址栏输入链接即可打开页面

三、修改页面遇到的各种问题

1、页面高度没有充满屏幕，只是由对应页面内容撑起了高度，找了一会原因，发现是app.vue页面的#app没有设置宽和高

2、首页面重定向到某一个页面时再次点击当前页面会报错

这里本来是重定向到cms某一个具体内容页面，报错了之后想设置一个默认页面，会不会就不冲突了，第一次进入页面确实没有这个问题了，但是在某个具体的页面停留刷新之后再次单击还会报同样的错误，于是乎求助网友，得到如下解答，经实践，好用

这里附上原文链接：

方法一： vue-router 回退版本3.0 （3.1以下版本）

npm uninstall vue-router    
npm install vue-router@3.0 -S

方法二： 对路由的push和replace方法重写规则

import VueRouter from "vue-router";
const [routerPush, routerReplace] = [VueRouter.prototype.push, VueRouter.prototype.replace];
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error => error);
};
VueRouter.prototype.replace = function replace(location) {
  return routerReplace.call(this, location).catch(error => error);
};

3，在使用table组件时，我希望能让表格宽度随着窗口宽度自适应，但是表格的宽度总是固定为初始化组件后渲染的宽度，每次窗口宽度有变化时底部就会出现滚动条，刷新一下table就又自适应了，每次都是这样，经过广大网友的集思广益，找到问题所在
“你应该是使用了flex 布局，，如一边固定一边自适应，，，则在自适应 容器中加 overflow: hidden ; 然后表格就可以自适应了”
我确实使用了flex布局，给容器中加上 overflow: hidden;后确实就好了

第一次发博，经验之谈，如有错误，请多指教