初始化项目
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;
834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
