vue—电商后台项目

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项目的步骤

1. 安装全局脚手架，是用来敲命令的，npm i -g vue-cli
2. 在目录中运行命令，生成vue框架，所有的文件及文件夹都不用自己去建，vue init webpack +文件名，下载好之后，会生成完整的文件，而我们只需要在src文件夹下面修改，其他文件夹都不要动：

• assets：用来放图片或者其他文件
• components：用来放每个功能的组件，一个功能一个文件夹
  • 每个组件的结构样式，js都在自身的vue上面编译
• router：index.js,导入组件，设置组件的路由，配置路由规则(路径，组件)
• main.js：整个项目的入口，webpack打包的入口
• App.vue: 根组件，项目的出口，就包含一个路由出口 <router-view></router-view>

3. 初始化项目
   主要是将之前的helloWord的文件配置、路由删除，vue文件图片删除
4. 开启一个新功能

• 在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
    }
  ]
})

5. 使用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)

6. 使用element-ui的组件，登录界面
   在官网中找到登录界面的静态结构，放到login(登录组件)的模板template中
7. 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'是要跳转页面的路由

8. 表单校验

• 在发送axios请求检验登录之前需要对表单的输入进行校验
  1. 在template的表单结构中添加ref的属性

   <el-form ref="loginForm" :model="loginForm" label-width="80px" :rules="rules">
  

  2. 在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' }
        ]
      }
  

  3. 在script的method设置表单验证的方法

  login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
         this.loginHandle()
        } else {
  
          return false
        }
      });
    }
  

  this.$refs.loginForm 是用来获取到页面中的组件或DOM对象