一、初始化
cd Desktop// 切换到桌面
mkdir 项目名// 创建文件夹
cd 项目名//切换到这个项目名文件
git init// 创建仓库
git pull 地址 master// 拉到某个地址的master分支的代码
code ./// 进入项目
// 打开项目以后,就可以关闭终端
二、运行项目
npm install// 安装依赖
npm run dev// 运行项目
三、修改拉下的文件内容
1.删除main.js中跟mock相关内容
2.删除mock文件夹
3.删除vue.config.js中:before:require('./mock')
4.将vue.config.js中lintOnSave的值改为false
5.重新运行项目:npm run dev
6.修改views/login/inde.vue中handleLogin()方法的内容,修改成下面的:
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.$router.push({ path: "/" });
// this.loading = true
// this.$store.dispatch('user/login', this.loginForm).then(() => {
//this.$router.push({ path: this.redirect || '/' })
//this.loading = false
// }).catch(() => {
//this.loading = false
// })
} else {
console.log("error submit!!");
return false;
}
});
},7.将权限路由premission.js里的内容全部删除
8.查看settings.js,将title内容改成‘后台管理系统’,然后再重新运行项目(npm run dev)
9.将store/modules/user.js内容清空:
const state = {}const mutations = {}const actions = {}export default {
namespaced: true,
state,
mutations,
actions
}10.将store/getters.js改成以下:
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
}
export default getters11.提交到远程仓库
git status
git add .
git commit -m '描述内容'
如果是已有仓库,直接复制已有仓库里的git命令
npm run dev12.清空拦截器utils/request.js,只保留以下内容
import axios from 'axios'const service = axios.create()service.interceptors.request.use()service.interceptors.response.use()export default service13.清空api/table.js 和 api/user.js
table.js:
import request from '@/utils/request'
export function getList() {}user.js:
import request from '@/utils/request'export function login() {}export function getInfo() {}export function logout() {}14.导入图片和样式资源
导入的common.scss要在index.scss中导入:
@import './common.scss';
分号一定要记得加,将Easy Sass 插件禁用,然后再重新运行项目15.修改端口,在.ene.davelopment 添加
port = 8888//是看vue.config.js里面定义的端口号是什么
重新运行项目,看看有没有修改掉端口号
再查看login页面有没有问题
四、开始实现开发
views/login/index.vue中
1.设置头部背景
文章图片
2.设置背景图片
.login-container {
...
background-image: url('~@/assets/common/login.jpg');
// 设置背景图片
background-position: center;
// 将图片位置设置为充满整个屏幕
....
}3.设置手机号和密码的字体颜色
$light_gray: #68b0fe;
// 将输入框颜色改成蓝色4.设置输入表单整体背景色
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.7);
// 输入登录表单的背景色
border-radius: 5px;
color: #454545;
}5.设置错误信息的颜色,要放到全局的样式里
.el-form-item__error {
color: #fff
}6.设置登录按钮的样式
登录
需要给el-button 增加一个loginBtn的class样式
.loginBtn {
background: #407ffe;
height: 64px;
line-height: 32px;
font-size: 24px;
}7.修改显示的提示文本和登录文本账号: 13800000002
密码: 123456
【项目分析一】
推荐阅读
- VUEX的基础
- 项目分析五
- 项目分析六
- 项目分析七
- vue.js|vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
- 大数据项目总结|基于Java+springmvc+vue 健康管理系统
- Java毕业设计|基于Java+SpringMvc+vue+element实现博物馆平台系统
- vue|Vue基础知识点(一)
- vuejs|vue-router原理与源码分析