vue3 基础学习记录

一、项目创建、插件安装

vue3 setup 语法糖：传送门

		脚手架( vue/cli )： 	npm install -g  @vue/cli@4.5.13 
		路由( vue-router ): 	npm install vue-router@^4.0.0-beta.13 --save 
		公共管理( vuex ):	npm install vuex@next -save
		装饰器( vuex ):		npm install vuex-module-decorators --save
		请求方式( axios ):	npm install axios	--save-dev
		样式插件(less):		npm install less less-load --save

二、详细介绍

1. 创建项目

		vue  create my_project

2. 配置路由 router

		1. @/router/index.js
		// 引入路由配置
		import { createRouter, createWebHashHistory } from "vue-router";
		// 进入路由文件
		import Home from "@/views/index.vue";
		import About from "@/views/about.vue";
		
		// 路由存放
		const routes = [
		  { path: "/", component: Home },
		  { path: "/about", component: About },
		];
		
		// 创建 router
		const router = createRouter({
		  // hash 模式
		  history: createWebHashHistory(),
		  routes,
		});
		
		// 路由拦截
		router.beforeEach((to, form, next) => {
		  console.log("to:", to, "form:", form);
		  next();
		});
		
		export { router };	// 导出路由
		
		2. main.js
		// 引入 router
		import { router } from "@/router"; 
		
		// 挂载路由
		createApp(App).use(router).mount("#app");

2. 公共管理 vuex

		1. @/store/index.js
		import { createStore } from "vuex";
		
		// 创建一个新的 store 实例
		const store = createStore({});
		export default store;
		
		2. @/store/modules/user.js
		import {
		  Action,
		  getModule,
		  Module,
		  Mutation,
		  VuexModule,
		} from "vuex-module-decorators";
		import store from "../index";
		
		@Module({ dynamic: true, store, name: "user" })
		class User extends VuexModule {
		  count: number = 0;
		
		  get getCount(): number {
		    return this.count;
		  }
		
		  @Mutation
		  setCount(wheels: number): void {
		    this.count = wheels;
		  }
		
		  @Action
		  set_count(wheels: number): void {
		    this.setCount(wheels);
		  }
		}
		
		const getUser = getModule(User, store);
		export default getUser;
		
		3. 页面引用
		import getUser from "@/store/modules/user";
		import { computed, watch } from "@vue/runtime-core";
		
		let { set_count, count } = getUser;
		const count_p = computed(() => getUser.count);
		const btn = (): void => {
		  count++;
		  set_count(count);
		};

3. 请求方式 axios

		import axios from "axios";

		// 创建axios实例
		const service = axios.create({
		  // 请求地址
		  baseURL: "http://",
		  // 超时
		  timeout: 120000,
		});
		// request拦截器
		service.interceptors.request.use(
		  (config: any) => {
		    config.headers = {
		      "Content-Type": "application/x-www-form-urlencoded",
		    };
		
		    // 请求拦截操作
		    return config;
		  },
		  (error) => {
		    Promise.reject(error);
		  }
		);
		
		// 响应拦截器
		service.interceptors.response.use(
		  (res) => {
		    // 响应拦截操作
		    return res.data;
		  },
		  (error) => {
		    return Promise.reject(error);
		  }
		);
		
		export default service;
		
		2. 接口路由
		import service from "./index";
		
		// 登录
		export function login(query) {
		  return service({
		    url: "/user/login",
		    method: "post",
		    params: query,
		  });
		}
		
		3. 页面使用
		import { login } from "./api/...";
		login({}).then(res=>{}).catch(err=>{})