初始化项目
1.npm i -g pnpm
2.pnpm create vite
a. ?Project name :输入项目的名字
b.Select a framework:选择所需的框架(vue、react等)
c.Select a variant:选择所需的语法(TS、JS等)
子组件与父组件间通信方式
接收父组件的属性与属性值
1.子组件获取父组件属性:
a.使用useAttrs接收(可以接收标签的属性和事件)
import {useAttrs} from ‘vue’
let useattr=useAttrs();
b.使用props接收
let props=defineProps(['属性名']);
PS:两种方法都可以接受父组件的属性与属性值,但是props优先级较高,他接收了,useAttrs就无法接收了。
2.父组件与子组件获取实例
ref:可获取真实dom节点,可获取子组件实例
1.在父组件中引入子组件,并在子组件标签中添加ref=‘XXX'属性。
2.子组件内部数据对外是关闭的,需要使用defineExpose方法对外暴露。
defineExpose([需要对外暴露的变量1,需要对外暴露的变量2........])
$parent:可以在子组件内部获取父组件实例
1.在父组件中引入子组件。
2.子组件内部的事件传入参数$parent,@click="handler($parent)",并在触发的事件中进行逻辑处理
2.父组件内部数据对外是关闭的,需要使用defineExpose方法对外暴露。
defineExpose([需要对外暴露的变量1,需要对外暴露的变量2........])
隔辈参数传递(provide和inject)
孙子组件获取爷爷组件数据(provide)
1.祖先组件引入provide,import {provide} from ’vue'
provide("提供的数据key",value)
2.孙子组件通过inject方法进行引入,import {inject} from ’vue'
let s= inject('key')
Pinia
vuex:集中式管理状态容器,可以实现任意组件之间通信.
核心概念:
state:存储数据。
mutations:修改数据的地方。
actions:处理业务的地方。
getters:计算属性。
modules:模块式组件开发。
pinia:集中式管理状态容器,可以实现任意组件之间的通信。
核心概念:
state:存储数据
actions:处理业务的地方。
getters:计算属性。
pinia使用方法:
安装:1. npm install -s pinia
2. 创建仓库store,以及模块仓库。
3. 在index.ts下对其进行暴露
//创建大仓库
import {createPinia} from 'pinia'
let store=createPinia();//用于创建大仓库(需要对外暴露)
export default store ;
4.在主入口进行挂载
.....
import store from "./store/index";
const app=createApp(App)
app.use(store)
.....
5.打开控制台即可看到
6.创建一个小仓库info (src/store/modules/info.ts)
//定义info小仓库
import {defineStore} from "pinia";
//参数1:小仓库名字
//参数2:小仓库配置对象
//defineStore()方法执行会返回一个函数,函数的作用就是让组件可以获取到仓库数据。
let useInfo = defineStore('info', {
//存储数据:state
state: () => {
return {
count: 99
}
},
actions: {函数方法},
getters: {}
})
export default useInfo;
7.对其进行使用 ,引入小仓库import XXX from ‘../../XXX’;let SSS=XXX();
项目环境变量配置
1.在项目下新建.env.development、.env.production、.env.test三个文件(与package.json同级)
2.切换环境,在启动项目时,选择对应的环境。(在package.json对scripts进行修改)
原: 现:
3.使用:import.meta.env
集成SVG图标
使用
常用阿里图标库(iconfont-阿里巴巴矢量图标库)
1.安装svg依赖插件
pnpm install vite-plugin-svg-icons -D
2.在vite.config.ts中进行配置
a.引入该依赖 import { createSvgIconsPlugin} from 'vite-plugin-svg-icons'
b.进行插件配置:
在plugins下进行配置,如下
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from "path";
import { createSvgIconsPlugin} from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
createSvgIconsPlugin({
iconDirs:[path.resolve(process.cwd(),'src/assets/icons')],
symbolId:'icon-[dir]-[name]'
}),
],
resolve:{
alias:{
'@':path.resolve('./src')
}
}
})
3.在项目入口进行svg代码配置 import 'virtual:svg-icons-register'
4.在阿里图标库中下载所需的svg代码,并将其保存到src/assets/icons文件夹下
5.使用:
<svg>
<!--xlink:href执行哪一个图标,属性值务必是#icon-图标名称,
在上一步的plugins中设置了svg图标的位置,故只需‘#icon-图标名’即可-->
<use xlink:href='#icon-图标名'></use>
</svg>
将svg图标封装成全局组件
1.封装组件
在conponents文件夹下新建图表组件(src/components/SvgIcon/index.vue),内容如下:
<template>
<svg :style="{width:w,height:h}">
<use :xlink:href="prefix+name" :fill="color"></use>
</svg>
</template>
<script lang="ts" setup>
//接受父组件传递的参数
defineProps(
{
prefix: {//前缀
type: String,
default: '#icon-'
},
name: String,//svg图标文件名称
color: { //填充颜色
type: String,
default: ''
},
//接受父组件设置的宽高
w:{ //宽
type: String,
default: '13px'
},
h:{ //高
type: String,
default: '13px'
},
}
)
</script>
<style scoped>
</style>
2.使用该组件
a.在所需的页面进行引入import svgIcon from '@/components/SvgIcon/index.vue'
b. 直接使用即可<svgIcon name="yyy" color="pink" w="300px" h="300px" ></svgIcon>
ps:图标颜色问题(阿里的图标可能出现无法直接修改填充颜色)
操作步骤如下:将选中的图标添加到购物车---》将购物车中的图标添加到项目中---》将会跳转到下载页面--》选中Symbol---》点击批量操作---》点击批量去色---》然后下载就可以了。
3.设置全局组件
在src/components文件夹下新建index.ts文件,用于对外暴露所需注册的组件。
//引入项目中所需引入的自定义全局组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'
//将上面引入的自定义组件,声明成对象,K-V一致
const all = {
SvgIcon,
Pagination
}
export default {
install(app) {
//注册项目全局组件
Object.keys(all).forEach(key=>{
app.component(key,all[key])
})
}
}
在主入口函数main.ts中引入该文件(import gloalComponent from '@/components/index')
并将其app.use(gloalComponent),然后就可以直接使用引入的组件了。
mock接口
需要插件vite-plugin-mock,官方文档如下:
vite-plugin-mock - npm (npmjs.com)https://www.npmjs.com/package/vite-plugin-mock/v/2.9.6
1.安装依赖
npm i mockjs -S
npm i vite-plugin-mock -D 或者指定版本 npm i vite-plugin-mock@版本号 -D
2.配置·
根据文档进行配置(https://www.npmjs.com/package/vite-plugin-mock/v/2.9.6)
封装axios
1.安装axios(pnpm install axios)
2.封装成工具类
import axios from 'axios';
import {ElMessage} from "element-plus";
//利用axios对象的create方法创建axios实例对象(其他配置:基础路径,超时时间等)
let request = axios.create({
//基础路径
baseURL: import.meta.env.VITE_APP_BASE_API,//基础路径会携带/
timeout: 5000 //毫秒
});
//request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
//config配置对象,headers属性请求头,经常给服务器携带公共参数
//返回配置对象
return config;
})
//响应拦截器
request.interceptors.response.use((response) => {
//成功回调
//简化数据
return response.data;
}, (error) => {
//http网络错误
//定义变量存储错误信息
let message = '';
//状态码
let status = error.response.status;
switch (status) {
case 400:
message = 'Token过期';
break;
case 401:
message = '用户没有权限(令牌、用户名、密码错误)!';
break;
case 403:
message = '用户得到授权,但是访问是被禁止的!';
break;
// 404请求不存在
case 404:
message = '网络请求错误,未找到该资源!';
break;
case 500:
message = '服务器出现问题';
break;
default:
message = '请求失败';
break;
}
ElMessage({
type: 'error',
message: message
})
return Promise.reject(error);
})
export default request;
路由配置
1.安装vue-router(pnpm install vue-router)
2.新建对应的路由页面
3.配置路由项
a.新建路由文件(src/router/index.ts)和所有的路由项(src/router/routers.ts)
index:
//通过vue-router插件实现模板路由配置
import {createRouter, createWebHashHistory} from 'vue-router'
import {constRoute} from './routes'
//创建路由器
let router = createRouter({
//路由模式
history: createWebHashHistory(),
routes: constRoute,
//滚动行为
scrollBehavior() {
return {
left: 0,
top: 0
}
}
});
export default router;
routers:(将其中的路由换成所需路由)
//所有路由
export const constRoute = [
{
//登录
path: '/login',
component: () => import('@/views/login/index.vue'),
name: 'login',//命名路由
},
{
//登录成功后,进行首页展示
path: '/',
component: () => import('@/views/home/index.vue'),
name: 'home'
},
{
//404
path: '/404',
component: () => import('@/views/404/index.vue'),
name: '404'
},
{
//任意路由
path: '/:pathMatch(.*)*',
redirect: '/404',
name: 'any'
}
]
4.在主入口处进行注册挂载
引入安装的vue-router插件(import router from "@/router")--》app.use(router )
5.编写对应的vue文件页面
数据仓库
预备(数据类型接口)
数据仓库主要是数据存储,计算和方法,在数据仓库以前,需要根据数据的输入,输出设置数据结构类型,在对应的api.ts文件同级目录下创建type.ts,并对外暴露。
//登录接口所需参数ts类型
export interface loginForm{
username:string,
password:string
}
interface dataType{
//加?是代表该对象属性可以没有
token?:string,
message?:string
}
//登录接口返回书类型
export interface resType{
code:number,
data:dataType
}
pinia开始
1.安装pinia(pnpm install pinia)
2.配置仓库
a.新建仓库(src/store/index.ts)
import {createPinia} from 'pinia'
let store=createPinia();//用于创建大仓库(需要对外暴露)
export default store ;
b.在入口函数处,注册挂载
import store from "./store/index";
......
app.use(store)
c.新建一个ts文件(创建小仓库,并对外暴露小仓库方法)
import {defineStore} from "pinia";
let userInfo=defineStore('userInfo',{
//存储数据:state
state: () => {
return {
}
},
actions: {
//这里的方法要写成普通函数,因为里面需要通过this去访问state里面的数据
},
getters: {
//类似计算属性。推荐里面传递一个形参的写法,不容易出错。
}
})
//对外暴露小仓库
export default userInfo;