Vue3教程

1.1 配置环境

vue官网：

Vue.js - The Progressive JavaScript Framework | Vue.js

终端
Linux和Mac上可以用自带的终端。
Windows上推荐用powershell或者cmd。Git Bash有些指令不兼容。

安装Nodejs
安装地址：

Node.js

安装@vue/cli
打开Git Bash，执行：

npm i -g @vue/cli
如果执行后面的操作有bug，可能是最新版有问题，可以尝试安装早期版本，比如：npm i -g @vue/cli@4

启动vue自带的图形化项目管理界面
vue ui
常见问题1：Windows上运行vue，提示无法加载文件，表示用户权限不足。
解决方案：用管理员身份打开终端，输入set-ExecutionPolicy RemoteSigned，然后输入y

1.2 基本概念

script部分

export default对象的属性：

name：组件的名称
components：存储<template>中用到的所有组件
props：存储父组件传递给子组件的数据
watch()：当某个数据发生变化时触发
computed：动态计算某个数据
setup(props, context)：初始化变量、函数
ref定义变量，可以用.value属性重新赋值
reactive定义对象，不可重新赋值
props存储父组件传递过来的数据
context.emit()：触发父组件绑定的函数

setup 函数作为组件的入口，通过 ref、reactive、computed 等函数创建响应式数据

setup函数样式：
 

import { ref } from 'vue';

export default {
  setup() {
    const myStyle = ref({
      color: 'red',
      fontSize: '16px',
      fontWeight: 'bold'
    });

    const changeColor = () => {
      myStyle.value.color = 'blue';
    };

    return {
      myStyle,
      changeColor
    };
  }
};

template部分

<slot></slot>：存放父组件传过来的children。
v-on:click或@click属性：绑定事件
v-if、v-else、v-else-if属性：判断
v-for属性：循环，:key循环的每个元素需要有唯一的key
v-bind:或:：绑定属性

style部分

<style>标签添加scope属性后，不同组件间的css不会相互影响。

第三方组件

view-router包：实现路由功能。
vuex：存储全局状态，全局唯一。
state: 存储所有数据，可以用modules属性划分成若干模块
getters：根据state中的值计算新的值
mutations：所有对state的修改操作都需要定义在这里，不支持异步，可以通过$store.commit()触发
actions：定义对state的复杂修改操作，支持异步，可以通过$store.dispatch()触发。注意不能直接修改state，只能通过mutations修改state。
modules：定义state的子模块

1.3 项目的API

1. 获取Json Web Token（JWT）

地址：https://app165.acapp.acwing.com.cn/api/token/
方法：POST
是否验证jwt：否
输入参数：
username: 用户名
password: 密码
返回结果：
access: 访问令牌，有效期5分钟
refresh: 刷新令牌，有效期14天

2. 刷新JWT令牌

地址：https://app165.acapp.acwing.com.cn/api/token/refresh/
方法：POST
是否验证jwt：否
输入参数：
refresh: 刷新令牌
返回结果：
access: 访问令牌，有效期5分钟

3. 获取用户列表

地址：https://app165.acapp.acwing.com.cn/myspace/userlist/
方法：GET
是否验证jwt：否
输入参数：无
返回结果：返回10个用户的信息

4. 获取某个用户的信息

地址：https://app165.acapp.acwing.com.cn/myspace/getinfo/
方法：GET
是否验证jwt：是
输入参数：
user_id：用户的ID
返回结果：该用户的信息

5. 获取某个用户的所有帖子

地址：https://app165.acapp.acwing.com.cn/myspace/post/
方法：GET
是否验证jwt：是
输入参数：
user_id：用户的ID
返回结果：该用户的所有帖子

6. 创建一个帖子

地址：https://app165.acapp.acwing.com.cn/myspace/post/
方法：POST
是否验证jwt：是
输入参数：
content：帖子的内容
返回结果：result: success

7. 删除一个帖子

地址：https://app165.acapp.acwing.com.cn/myspace/post/
方法：DELETE
是否验证jwt：是
输入参数：
post_id：被删除帖子的ID
返回结果：result: success

8. 更改关注状态

如果未关注，则关注；如果已关注，则取消关注。

地址：https://app165.acapp.acwing.com.cn/myspace/follow/
方法：POST
是否验证jwt：是
输入参数：
target_id: 被关注的用户ID
返回结果：result: success

9. 注册账号

地址：https://app165.acapp.acwing.com.cn/myspace/user/
方法：POST
是否验证jwt：否
输入参数：
username: 用户名
password：密码
password_confirm：确认密码
返回结果：
result: success
result: 用户名和密码不能为空
result: 两个密码不一致
result: 用户名已存在