项目演示地址：
大事件
项目技术栈： Vue2 Element-ui echarts
项目架构： 登录注册 首页 文章管理—文章分类、文章列表 个人中心-基本资料、更换头像、重置密码
登录注册功能：
如图：
水平垂直居中布局：
- 这是最基本的一种
1
2
3
4position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); - flex弹性布局
- 只设置父元素
1
2
3
4
5.parent {
display: flex;
justify-content: center;
align-items: center;
}
- 父子元素一起设置
1
2
3
4
5
6
7.parent {
display: flex;
}
.children {
align-self: center;
margin: auto;
}
- 第三种是设置margin: auto
1
2
3
4
5
6
7
8
9
10
11.parent {
position: relative;
}
.children {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
} - 绝对定位-margin 贪多嚼不烂，先记住这几个
1
2
3
4
5
6
7{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
注册和登录页主要采用element-ui的表单，使用el-form的表单校验规则。注意，在用户点击注册和登录时需要采用表单提供的validate()方法进行一次兜底校验，执行async valid如果用户通过校验则进行await返回拿到的接口数据：
1 | this.$refs.loginRef.validate(async valid => { |
对async await的理解：
async用来修饰函数，表明这是一个异步的函数，会默认返回一个Promise对象的resolve值，await意为等待在async修饰的函数执行到被await修饰的对象这一行时，会获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行。
数据绑定
将表单数据：model到data()函数中，这样就拿到了用户输入的数据，可以调用接口传入后台。
token校验
用户登录成功后台会颁发token token可以进行身份的识别与验证，比如用户没有登录是不可以通过路由跳转首页的，这时可以使用token+全局前置路由守卫，而token一般保存在localstorage中，一旦需要校验token的页面过多从localstorage拿数据就太麻烦了，可以将token存入Vuex中，但是vuex在刷新时token就会消失，需要做本地化长时间存储，可以使用vuex-persistedstate插件来完成
vuex的5个属性
1 | state: { // 存放数据，和data类似 } |
此外还有 plugins: [] 插件
首页
如图：
使用echarts：
echarts官网
文章管理
如图：
发表文章：
几个功能下来感觉并不难，做完项目发现强的不是我是Element-ui这个组件库
项目部署！！
真的自己完成一个上线好有成就感，就是那种解决各种问题的感觉！（虽然项目是跟着敲的很捞）
首先肯定是搞一个服务器
我是学生能不能免费送我 扣1送服务器 111哥你是真送啊
人生第一次感受到了学生的权益！阿里云高校计划，学生认证免费领取一个月服务器！https://developer.aliyun.com/plan/student?spm=5176.student.0.0.661f4bab21Sv7f有了服务器就可以开始部署了！
首先这里说一下打包，执行npm run build命令可以使用webpack进行项目打包，但是项目使用的各种依赖包又很大，这就会让打包后的体积十分庞大，这时可以在vue.config.js配置 configureWebpack，使用 externals 来提取使用的依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，但是在开发时我们可以继续使用导入的依赖包1
2
3
4
5
6
7
8
9
10
11
12
13configureWebpack: {
externals: {
echarts: 'echarts',
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
dayjs: 'dayjs',
'element-ui': 'ELEMENT',
'vue-quill-editor': 'VueQuillEditor',
'vuex-persistedstate': 'createPersistedState'
}
}这样webpack在打包时就会忽略掉externals内的包，而没有导入依赖包项目肯定是没法运行的，我们则需要在
public/index.html文件中使用CDN引入依赖
言归正传，项目打包好了，就可以上传到服务器了
3. 上传服务器
我使用的是
xftp,只需要拖拽就可以上传文件！
xftp家庭学生版官网下载
建立连接：
在主机栏输入你服务器的公网地址，然后输入用户名密码，在阿里云第一次购买服务器后密码需要自己重置才有！然后xftp就连接上你的服务器了，选择打包好的dist文件将它上传吧！
！
4. 现在服务器有了，执行文件有了，怎么才能让浏览器在输入我们的服务器地址后就能进入项目页面呢！
设置nginx代理
回到阿里云服务器控制台，选择自己的云服务器输入账号密码后进行远程连接！
首先输入 cd / 回到根目录，发现这其中有etc 和 root的文件夹，etc就是我们要配置nginx的地方，而root则是有我们上传的项目文件
输入 cd etc 来到etc文件夹下，发现并没有nginx，这是因为目前的这台服务器还并没有安装yum install nginx 下载nginx
下载好后就有nginx文件夹了！
然后cd到nginx目录下，发现这里的目录有个nginx.conf 这就是我们最终要配置的nginx
vim nginx.conf 进入编辑 按下 i 进行插入
主要修改的配置只有如下两段
1 | server { |
:wq 保存后就可以使用 nginx命令启动nginx了
- 解决问题
nginx代理配置好了但是浏览器输入公网IP地址还是无法访问？
- 配置安全组 在你的云服务器控制台选择安全组，添加端口为80 表示该端口可以出入放行
还是没有解决？ - 重启防火墙
1
2
3
4
5
6systemctl status firewalld #查看防火墙状态
systemctl stop firewalld # 禁用防火墙
systemctl start firewalld # 启动防火墙
systemctl enable firewalld # 设置开机启动
firewall-cmd --zone=public --add-port=80/tcp --permanent # 防火墙放行80端口
firewall-cmd --reload # 重启防火墙
问题解决！浏览器输入公网IP地址可以访问项目！
