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时需要此插件
}),
]
})