一 创建项目

1. 安装vue-cli

npm install -g @vue/cli

创建项目

mkdir projects && cd projects
vue ui # 通过图形界面创建项目
vue create create-vue-app-in 通过命令行创建项目

选择项目偏好，生成项目

二 设置路由（router）

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

三 项目重点

1. 根据API文档get方式获取数据

async getUserList() {
      const { data: res } = await this.$http.get('users', { params: this.queryInfo })
      // console.log(res)
      if (res.meta.status === 200) {
        if (res.data.users.length !== 0) {
          // 获取成功
          this.userList = res.data.users
          this.total = res.data.total
        } else {
          this.queryInfo.pagenum--
          this.getUserList()
          if (this.queryInfo.pagenum === 1) {
            return null
          }
        }
      } else {
        this.$message.error('获取用户列表失败')
      }
    }

2. 根据API文档post方法传递数据

saveCategory() {
      this.$refs.catRuleRef.validate(async valid => {
        if (valid) {
          // 进行请求
          const { data: res } = await this.$http.post('categories', this.cateRuleForm)
          console.log(res)
          if (res.meta.status === 201) {
            this.hideDialog()
            this.$emit('updateList')
          }
        } else {
          this.$message.error('请填写好分类信息')
        }
      })
    }

3. 根据API文档put方法获取数据

async saveRole() {
      const { data: res } = await this.$http.put(`users/${this.user.id}/role`, { rid: this.selectRole })
      if (res.meta.status === 200) {
        console.log(res)
        this.$message.success('成功修改角色')
        this.selectRole = ''
        this.$emit('updatelist')
        this.hide()
      }
    }

4.根据API文档删除数据

deleteCategroy(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async res => {
        if (res === 'confirm') {
          const { data: res } = await this.$http.delete(`categories/${id}`)
          // console.log(res)
          if (res.meta.status === 200) {
            this.$message.success('删除成功')
            this.getCategoryList()
          } else {
            this.$message.error(res.meta.msg)
          }
        }
      }).catch(err => {
        console.log(err)
        // 如果点击取消就执行该函数
        this.$message.info('取消了该删除')
      })
    }

5.校验提示

 addUserRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '请输入3-10个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkObj.checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkObj.checkMobile, trigger: 'blur' }
        ]
      }

6. 添加功能

// 添加一个用户
    addOneUser() {
      // 1.进行数据的校验
      this.$refs.userFormRef.validate(async valid => {
        if (valid) {
          // 数据校验成功
          // console.log(valid)
          const { data: res } = await this.$http.post('users', this.userForm)
          console.log(res)
          // 关闭dialog
          this.addUserdialogVisible = !this.addUserdialogVisible
          // 更新table中数据
          this.getUserList()
        } else {
          this.$message.error('请检查数据')
        }
      })
    }

7.项目中使用的组件通讯 props / $emit

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1.父组件向子组件传值

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

2.组件向父组件传值（通过事件形式）

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

总结

项目的实现，最主要的是路由的配置，服务器和浏览器的数据传递与查看，组件间数据的传递，思维逻辑的通顺。