Vite超方便，快捷的使用（回不去了）

若尘~望境

已于 2022-03-07 17:23:07 修改

阅读量529

点赞数

分类专栏： Vite使用文章标签： vue.js javascript

于 2022-02-24 14:59:36 首次发布

本文链接：https://blog.csdn.net/chengtiandi/article/details/123111533

版权

Vite使用专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Vite创建Vue项目，包括初始化、安装vue-router、配置路由以及自动引入views文件作为路由。同时，详细讲解了如何安装和按需引入Element-Plus组件库，借助unplugin-auto-import实现自动导入。此外，还提到了解决浏览器兼容性问题的步骤，通过@vitejs/plugin-legacy插件来支持老版本浏览器。

摘要由CSDN通过智能技术生成

Vite：

创建项目

npm init vite@latest

+命名+cd+npm i + run dev

下载 router

npm install vue-router@next

新建一个 router.js 文件到 router 文件夹

 import { createRouter,createWebHistory} from "vue-router";

// 路由信息
const routes = [
    {
        path: "/",
        name: "Index",
        component:  () => import('../views/index/index.vue'),
    },
];

// 导出路由
export default createRouter({
  history: createWebHistory(),
  routes
});

或者简单的自动引入views文件为路由

import { createRouter, createWebHistory } from "vue-router";

const modules: any = import.meta.glob('../views/**/**.vue');
let routes: any = [];
if (modules) {
  for (const key in modules) {
    if (Object.prototype.hasOwnProperty.call(modules, key)) {
      let name = key.split('.vue')[0].split('/')[key.split('.vue')[0].split('/').length - 1];
      // home 从定向
      // 路由信息
      // console.log(name);
      routes.push({
        path: `/${name == 'home' ? '' : name}`,
        name,
        meta: {
          title: name,
        },
        //本地能使用，上生产直接裂开~~
        //()=>import(/* @vite-ignore */ `/@views/${itemRouter.component}`),
        //使用modules
        component: modules[key],
      });
    }
  }
}
// console.log(routes);
// 导出路由
export default createRouter({
  history: createWebHistory(),
  routes,
});

进入 main.ts 里面引入+use()

import router from "./router/index";
createApp(App).use(router).mount('#app')

安装 element

npm install element-plus --save

使用 Icon 需要单独下载

npm install @element-plus/icons-vue

vite 按需引入

npm install -D unplugin-vue-components unplugin-auto-import

// 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 {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

插件扩展

自动按需引入 vue vue-router 的函数

自动按需引入 components 的组件

    AutoImport({
      // 自动导入vue和vue-router相关函数
      imports: ["vue", "vue-router"],
      // 生成 `auto-import.d.ts` 全局声明
      dts: "src/auto-import.d.ts",
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      dts: "src/components.d.ts",
      dirs: ['src/components'],
      resolvers: [ElementPlusResolver()],
    }),
    // 这样之后不需要在 main 中引入 element-plus ,components 组件，
    // 也不需要在 vue 文件中引入 vue 和 vue-router 中所有的东西

解决浏览器兼容

首先安装插件：
npm i @vitejs/plugin-legacy -D
然后配置 vite.config.js

import legacyPlugin from '@vitejs/plugin-legacy';
export default defineConfig({
  plugins: [
    legacyPlugin({
      targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
    }),
]
})