Vite项目实践总结(二)：基础依赖

柜子动了
492 阅读5分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

继上一次初始化Vite项目后，接着搭建我们的项目，俗话说的好：工欲善其事，必先利其器。所以需要给项目安装一系列辅助我们开发的工具。

Vite项目实践总结(一): 项目初始化

1、css预处理器：Scss

yarn add sass -D

直接运行即可，在SFC(单文件组件)中也可以直接使用了

但是有时，我们需要做主题颜色切换的功能，就需要用到scss变量。 scss变量如果要导出到全局的话，需要在vite.config.ts中添加如下配置项：

//...
export default defineConfig({
  //...
  //配置scss全局变量
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/style/variables.scss";`,//配置变量
      }
    }
  }
})

variables.scss就是我们用来定义全局变量的地方

// theme主题色变量
$color-primary: var(--theme, #f00) !default;

这样我们就可以在任意的SFC中的style模块访问到$color-primary这个变量，通过重新设置css变量--theme，就可以实现动态切换主题的功能。

如何更改主题色，可以使用document.body.style.setProperty('--theme', #0f0)来修改。

2、Vue-Router和Pinia

yarn add vue-router pinia -S

另外，pinia还需要用到数据持久化，所以还需要安装持久化插件

yarn add pinia-plugin-persist -S

在src下新建store和router目录分别用来管理状态和路由

(1)、store

// store/index.ts
import { defineStore } from 'pinia';

/**
 * @param 容器ID(唯一的) 
 * @param 选型对象(state、getter和action) 
 * @return 返回值是一个函数，通过该函数即可得到容器实例 
 */
const useAppStore = defineStore('app', {
  state: () => {
    return {
      count: 10
    }
  },
  getters: {
    count5(state) {
      return state.count += 5;
    }
  },
  actions: {
    // 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this
    changeState() {
      this.count += 10;
    },
    changeStates(num: number) {
      this.count += num + 2;
    }
  },
  persist: {
    //数据持久化
    enabled: true, //是否开启
    strategies: [
      {
        //自定义名称
        key: 'app-store',
        storage: localStorage,//存储方式
        paths: ['count'] //包含的state中字段,不写默认是全部
      }
    ]
  }
});

export default useAppStore;

在main.ts中引入pinia

import { createPinia } from 'pinia';
import piniaPluginPersist from 'pinia-plugin-persist';

const pinia = createPinia();
pinia.use(piniaPluginPersist);

createApp(App)
  .use(pinia)
  //....

(2)、router

//===== router/routes.ts => 放置路由表
import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    name: 'login',
    path: '/login',
    component: () => import('@/pages/login')
  },
];

export default routes;

//===== router/index.ts =>整合路由表，路由守卫的一些功能
import { createRouter, RouteLocationNormalized, createWebHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //路由404匹配
    {
      path: "/:pathMatch(.*)*",
      component: () => import("@/pages/Result"),
      name: "Result",
    },
    ...routes,
  ],
});
//路由守卫
router.beforeEach((to, from, next) => {
  //...
});

export {
  router
}

在main.ts中引入

import { router } from './router';

createApp(App)
 //...
 .use(router)
 //...

注意：pinia和vue-router在挂载到vue的createApp实例上时，router插件应该放在pinia后面，因为路由中可能会用到缓存中的一些功能。

3、Element-Plus与按需加载

yarn add element-plus -S

按需加载的话，还需要使用额外的插件，可以使用官网的按需加载，这里使用unplugin-vue-components插件

yarn add unplugin-vue-components -D

修改vite.config.ts配置

import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

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

这样就可以直接在template中使用element-plus组件，而不需要每次都手动引入。

使用自动引入遇到的一系类问题

1. 自动引入，控制台警告

问题[vite] Failed to load source map for /node_modules/.vite/chunk-xxxxx.js?v=XXXXXXXX.

报错中提示我们node_modules下的.vite中没有xxxx.js文件，我翻看.vite目录，发现只有一个package.json文件，而没有xxxx.js，所以会报错

  1. 删除node_modules，重新安装依赖，无效
  2. 第三方插件的影响，只要是新增插件重新安装node_modules都会出现这个问题
  3. 自动引入是不是不支持手动引入组件，注释项目中的手动引入，发现没有影响

最后，试了一下将自动引入的插件去掉，使用全局引入的方法，发现没有报错，可以得知是由于自动引入插件没有找到依赖而产生的问题。

其实是没有影响的，这些警告会在一段时间的自动修复后，不会在出现。

还是挺烦人的，每次安装新插件，就会报这个警告，如果有大佬知道如何解决，麻烦告知我一下😂。

2、按需引入ElMessageBox样式丢失

// 单独引入ElMessageBox
import { ElMessageBox } from 'element-plus'
// 单独引入样式即可
import 'element-plus/theme-chalk/el-message-box.css';

建议：因为提示信息等组件，是开发过程中经常用到的，所以我们可以将它封装成一个全局的组件，而不用每次都需要引入它的样式。

3、Element菜单折叠卡顿

编写项目导航栏折叠过程中，发现折叠时菜单发生卡顿(图标闪烁), 影响用户体验

需要加上一些样式进行处理,样式如下，同时设置菜单的宽度也在这个CSS里面设置的：

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  height: 100%;
}

4、打包报错,查找报错信息发现是element-plus相关的错误

element2.png 解决方法 在 tsconfig.json 文件中 compilerOptions 选项下加入 "skipLibCheck": true // 跳过自由检查

{
  "compilerOptions": {
    "skipLibCheck": true,
  }
}

5、Ts引入第三方包报错：“无法找到模块”

解决办法有两种：

  • 方法一：安装库的TS声明文件
  • 方法二：自己写库的TS类型声明

优先使用方法一，但是不是所有库都有TypeScript的声明文件，所以方法一无效才用方法二。

方法一： 根据报错提示哪个库缺TS声明文件安装对应的声明文件即可：

npm install -D @types/xxxxx

xxxxx就是库的名字

方法二：自己添加对应库的ts类型声明 新建types类型文件夹,添加index.d.ts类型文件

declare module 'xxxxx';
avatar
文章
阅读
粉丝