项目分析一 vue.js

一、初始化

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