Vue3 基础知识点汇总 自学笔记，记录难点 和 新知识点

https://pan.baidu.com/s/1ZqjMxwZklZVYpB1ZbzEKKA&pwd=9987#list/path=%2F&parentPath=%2Fsharelink3232509500-544543940077305

1.vue3 基础

1.1vue3基础及创建

npm init vue@latest

1.2.熟悉项目目录及关键文字

1.3 组合式API-setup

1.4.组合式 API reactive 和ref 函数 （都是为了生成响应式数据）

1.5.组合式API-computed 计算属性函数

1.6.watch 函数

1.7.组合式API-生命周期函数

1.8.组合式 API-父子传参

1.9. 模板引用ref 获取dom

1.10.跨层传递普通数据provide 和 inject（爷爷向孙子传递数据，不通过爸爸）

2.Pinia 的基础

2.1 基础

安装使用 yarn

用你喜欢的包管理器安装 pinia：

yarn add pinia

或者使用 npm

npm install pinia

TIP

如果你的应用使用的 Vue 版本低于 2.7，你还需要安装组合式 API 包：@vue/composition-api。如果你使用的是 Nuxt，你应该参考这篇指南。

如果你正在使用 Vue CLI，你可以试试这个非官方插件。

创建一个 pinia 实例 (根 store) 并将其传递给应用：

在 main.js 配置

import {
    createApp } from 'vue'
// 1.导入createPinia
import {
    createPinia } from 'pinia'
import App from './App.vue'
// 2.执行方法得到实例
const pinia = createPinia()
const app = createApp(App)
// 3.将 pinia实例加入到 app 应用内
app.use(pinia)
app.mount('#app')

2.2 pinia的基础使用

1.在 src文件下创建一个stores 文件在创建一个 counter.js

2.3 pinia的异步案例

2.4 storeToRefs 保持数据的响应式解构

注意 ：数据需要使用 storeToRefs 方法直接解构就能用啦 ~

3.项目搭建 及git 的使用

3.1项目搭建

npm init vue@latest

3.2运行项目

yarn add   
yarn dev

3.3 搭建基础目录

apis
composables
direactives
styles
utils

3.4 git 管理项目

git init
git add .
git commit -m 'init'

3.5 别名路径联想提示

{
   
    "compilerOptions": {
   
        "baseUrl": "./",
        "paths": {
   
            "@/*": ["src/*"]
        }
    }
}

发生实际目录转化的是vite.config.js 中

export default defineConfig({
   
  plugins: [
    vue(),
  ],
  resolve: {
   
    alias: {
   
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

4 项目起步 - 组件引入 elemntplus；

4.2 引入项目

第一步 看官网安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

第二步 按需引入

npm install -D unplugin-vue-components unplugin-auto-import
或者 yarn
yarn add -D unplugin-vue-components unplugin-auto-import

第三步 在 vite.config.ts

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
   
  // ...
  plugins: [
    // ...
    AutoImport({
   
      resolvers: [ElementPlusResolver()],
    }),
    Components({
   
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

第四步.试一试看看好用不

4.2 项目初始化之elementPlus 定制主体

第一步 安装scss

npm i sass -D

yarn add sass -D

第二步 创建自己要使用的主色调 在styles 下新建 elment 下新建index.scss

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
    $colors:(
        'primary': (
            'base': #27ba9b,
        ),
        'success': (
            'base': #1dc779,
        ),
        'warning': (
            'base': #ffb302,
        ),
        'danger': (
            'base': #e26237,
        ),
        'error': (
            'base': #cf4444,
        )
    )
)

第三步 自动导入配置

css: {
   
    preprocessorOptions: {
   
      scss: {
   
          // 自动导入定制化样式文件进行覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }

5.项目起步之 - axios基础配置

5.1 axios 安装

npm i axios     // 安装

5.2 配置基础设置

第1步
在 utils 下创建一个公用的 http.js 文件 创建拦截器等

// axios 基础的封装
import axios from "axios";

const httpInstance = axios.create(
    {
   
        baseURL: 'https://api.goodsright.shangkelian.cn/api/',
        timeout:5000
    }
)
// 拦截器
httpInstance.interceptors.request.use ((config) => {
   
    return config;
},  (error) => {
   
    return Promise.reject(error);
})

// 添加响应拦截器
httpInstance.interceptors.response.use((response) => {
   
    return response.data;
},  (error)=> {
   
    return Promise.reject(error);
})

export default httpInstance

第2步 在apis 文件下创建【文件名】.js 文件用于装载你自己定义的接口；

// 引入公用封装
import httpInstance from '@/utils/http'

// 自定义请求接口
export function getGoodsIndex() {
   
    return httpInstance({
   
        url: 'mall/shops'
    })
}

第3步 在main.js 文件下完成测试请求；

// 引入封装的请求即可欧
import {
   
    getGoodsIndex
} from './apis/test'  

// 请求接口
getGoodsIndex().then(res => {
   
    res.data.categories.map(item=>console.log(item.name))
}).catch(err => {
   
    console.log(err)
})

注意 可以多个 axios.create()

6.项目起步 - 基础路由配置

6.1 基础路由配置-一级路由

（页面整体样式不一样，就把他当做一级路由）

第1步 创建文件

第2步 配置 router 下的 index.js文件

/*
 * @Author: Aimee~
 * @Date: 2023-07-31 13:41:27
 * @LastEditTime: 2023-08-02 09:56:02
 * @LastEditors: Aimee
 * @FilePath: /vue-rabbit/src/router/index.js
 * @Description: 配置路由
 */
import {
    createRouter, createWebHistory } from 'vue-router'
import LoginView from '@/views/Login/index.vue'
import LayoutView from '@/views/Layout/index.vue'
import HomeView from '@/views/Home/index.vue'
import CategoryView from '@/views/Category/index.vue'

const router = createRouter({
   
  history: createWebHistory(import.meta.env.BASE_URL),
  // 配置path 和comoponent 对应关系的位置
  routes: [
    {
   
      path: '/',
      name: 'layout',
      component: LayoutView,
      children: [
        {
   
          path: '',
          name: 'home',
          component: HomeView
        },
        {
   
          path: '/category',
          name: 'category',
          component:CategoryView
        }
      ]
    },
    {
   
      path: '/login',
      name: 'login',
      component: LoginView
    }
  ]
})

export default router

第3步 配置router 在layout 下配置可以展示二级路由router-view 默认展示第一个子项

<template>
    <div>LayOut页面</div>