1.Vue项目碰到"‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件"报错
将项目里的“node_modules”文件夹删除，然后在cmd中cd到项目目录，依次运行命令：npm install和npm run build，最后运行npm run dev后项目成功运行。
2 bug找不到，清缓存
npm catch clean --force
3 Vue项目的步骤
- 安装全局脚手架，是用来敲命令的，npm i -g vue-cli
- 在目录中运行命令，生成vue框架，所有的文件及文件夹都不用自己去建，vue init webpack +文件名，下载好之后，会生成完整的文件，而我们只需要在src文件夹下面修改，其他文件夹都不要动：
- assets：用来放图片或者其他文件
- components：用来放每个功能的组件，一个功能一个文件夹
- 每个组件的结构样式，js都在自身的vue上面编译
- router：index.js,导入组件，设置组件的路由，配置路由规则(路径，组件)
- main.js：整个项目的入口，webpack打包的入口
- App.vue: 根组件，项目的出口，就包含一个路由出口 <router-view></router-view>
- 初始化项目
主要是将之前的helloWord的文件配置、路由删除，vue文件图片删除 - 开启一个新功能
- 在component文件中新建vue组件
- 在index.js中导入新功能的组件:import...from...
import Login from '@/components/login/Login'
- 在index.js中配置路由，简言之就是在script的路由中配置组件的路径和组件名
export default new Router({
routes: [
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home
}
]
})
- 使用element-ui
后台管理的页面都是element-ui的插件引入的，所以需要使用element-mui
- 安装 npm i element-ui -S
- 在main.js中导入,配置element-ui
// 使用 element-ui
import ElementUI from 'element-ui'
// 导入样式
import 'element-ui/lib/theme-chalk/index.css'
// 安装插件
Vue.use(ElementUI)
- 使用element-ui的组件，登录界面
在官网中找到登录界面的静态结构，放到login(登录组件)的模板template中 - axios发送请求校验登录页面的用户名和密码
- 安装 npm i -S axios
- 在login.vue中导入axios
import axios from 'axios'
- 发送axios请求，校验用户名跟密码
loginHandle(){
axios
.post('http://localhost:8888/api/private/v1/login',this.loginForm)
.then((res)=>{
if(res.data.meta.status===200){
console.log('登录成功',res)
this.$router.push('/home')
}else{
console.log('登录失败',res)
}
})
}
}
注意：
- post的参数，第一个的参数是接口的地址，第二个要发送给服务器的数据
- 登录页面校验成功之后还要跳转页面，通过this.$router.push('/home')，来实现跳转，'/home'是要跳转页面的路由
- 表单校验
- 在发送axios请求检验登录之前需要对表单的输入进行校验
- 在template的表单结构中添加ref的属性
<el-form ref="loginForm" :model="loginForm" label-width="80px" :rules="rules">- 在script的data里设置表单的验证规则rules
rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' } ] }- 在script的method设置表单验证的方法
this.$refs.loginForm 是用来获取到页面中的组件或DOM对象login() { this.$refs.loginForm.validate((valid) => { if (valid) { this.loginHandle() } else { return false } }); }
