吾生也有涯，而学也无涯，以有涯随无涯!
创建项目及配置
vite创建vue项目
// 使用 npm
npm init @vitejs/app
// 使用 yarn
yarn create @vitejs/app
对vite.config.ts等文件进行配置
路径问题
- vite.config.ts中引入path报错解决：安装
npm install @types/node -D，同时在tsconfig.node.json文件中配置"allowSyntheticDefaultImports": true - 用@符号引入路径报错: 在tsconfig.json文件中进行配置
// 解析非相对模块名的基准目录
"baseUrl": "./",
// 模块名到基于 baseUrl的路径映射的列表。
"paths": {
"@": ["src"],
"@/*": ["src/*"]
}
安装全家桶
配置vue-router
- 使用npm安装：
npm install vue-router --save - 创建routers文件夹，导出router对象
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
/**
* @RouteRecordRaw vue-router内置的路由对象类型
*/
const routes: RouteRecordRaw[] = [
{
path: "/",
redirect: { name: "login" }
},
{
path: "/login",
name: "login",
component: () => import("@/views/login/index.vue"),
meta: {
requiresAuth: false,
title: "登录页",
key: "login"
}
}
];
/**
* @createWebHashHistory 通过window.history.state来管理历史记录；
* @createMemoryHistory 是通过维护一个队列和一个位置来实现对路由记录的管理；
*/
const router = createRouter({
history: createWebHashHistory(),
routes,
strict: false,
// 切换页面，滚动到最顶部
scrollBehavior: () => ({ left: 0, top: 0 })
});
export default router;
- 在mian.ts的文件引入router对象并挂载到app上
import router from "@/routers/index";
const app = createApp(App);
app.use(router).mount('#app')
- 占位:
<router-view> </router-view> - 在组件中使用router对象
import { useRoute } from "vue-router";
const route = useRoute();
配置pinia仓库
- 安装pinia:
npm install pinia@next - src下新建目录store，导出store对象
import { defineStore } from "pinia";
import { GlobalState } from "./interface"; // 规定state中的变量有哪些
// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const GlobalStore = defineStore({
// id: 必须的，在所有 Store 中唯一
id: "GlobalState",
// state: 返回对象的函数
state: (): GlobalState => ({
}),
getters: {},
actions: {
},
});
- 在main.ts中挂载到app上
- 在组件中使用
import { GlobalStore } from "@/store/index";
const globalStore = GlobalStore();
pinia学习
学习文章: # 我把vue3项目中的vuex去除了，改用 pinia
配置element-plus(参考官网)
开发
router
文件的批量引用
vite版本的import.meta.globEager
const metaRouters = import.meta.globEager('./modules/*.ts');
webpack版本的require.context
const files = require.context('.', false, /.ts$/);
const modules = {};
files.keys().forEach((key) => {
if (key === './index.ts') { return; }
modules[key.replace(/(./|.ts)/g, '')] = files(key).default;
});
export default modules;
require.context的参数
- directory:表示检索的目录
- useSubdirectories：表示是否检索子文件夹
- regExp:匹配文件的正则表达式,一般是文件名
例如 require.context("@/views/components",false,/.vue$/)
router切换时顶部的进度条
安装nprogress
npm install --save nprogress
如果是TS项目时，因为nprogress是JS文件所以引入报错
方法1：偷巧
- 在tsconfig.json中配置可以引入JS文件
// 允许引入JS
"allowJs": true,
- 新建一个js文件（我命名为mynprogress.js）
//由于ts 无法直接引入这个 所以先用js引入，然后再用js引入
import nprogress from 'nprogress'
import "nprogress/nprogress.css"
export default nprogress
- 在TS文件中引入上面的文件就可以了。
方法2： 声明
- 创建plugins.d.ts文件
.d.ts文件：声明文件，来声明这些第三方库的类型，这样在使用第三方库的时候，就有类型了
npm下载的"包"自带了声明文件, 如果我们需要对其类型声明进行扩展就可以使用"declare module"语法.
declare module "nprogress";
axios
vue
ref使用dom
1.在setup中创建变量
const loginFormRef = ref<FormInstance>();
2. 绑定到相应的dom上
<el-form ref="loginFormRef"> </el-form>
3. 在onMounted函数中调用
onMounted(() => {
console.log(loginFormRef.value);
})
注：因为setup函数代替了vue2的created函数，所以在setup中dom尚未挂载，所以需要在onmounted挂载函数中调用
挂载全局方法
- 在main.ts文件中进行全局挂载
import axios from 'axios';
app.config.globalProperties.$http = axios;
- 在想使用该方法的组件中引用
import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance()；
proxy.$http({ })
