阅读 304

为什么越来越多的人弃坑 Webpack 用 Vite?

封面图

图片来自于网络

嗨~大叫好啊,我是阿壮,一个有情怀的程序员。我做的是后端,但是平时也有意识的去了解一些前端技术,争取有一天可以成为一个”全干“程序员。今天分享以下 Vite 的使用感受。 使用 Vue CLI 创建的项目默认的打包工具是 webpack,webpack 缺点是打包速度真的有些慢,每次浏览器都要等几秒才会反应过来,这次我们使用 Vite 作为打包工具,我在实际体验中发现速度比 webpack 快很多,而且现在 vite2 已经推出,bug 也比以前少了不少,推荐大家可以尝试一下,以下是具体的步骤

创建项目

使用 yarn 创建 Vue3+TypeScript+Vite 的项目

yarn create vite my-vue-app --template vue-ts
复制代码

集成 Element Plus

  1. 安装
yarn add element-plus
复制代码
  1. 编辑 main.ts
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";

const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");
复制代码

集成 Vuex

  1. 安装
yarn add vuex@next --save
复制代码
  1. 新建 store/index.ts
import { createStore } from "vuex";
import User from "./modules/user";

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    User,
  },
});
复制代码
  1. 新建 store/modules/user
const state = {
  count: 0,
};
const getters = {
  getCount() {
    return state.count;
  },
};
const mutations = {};
const actions = {};
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};
复制代码
  1. 编辑 main.ts
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store/index";

const app = createApp(App);
app.use(store);
app.mount("#app");
复制代码

集成 Vue Router

  1. 安装
yarn add vue-router@4
复制代码
  1. 新建 router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Layout from "../layouts/index.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Layout",
    component: Layout,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;
复制代码
  1. 编辑 main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";

const app = createApp(App);
app.use(router);
app.mount("#app");
复制代码

集成 less

  1. 安装
yarn add less less-loader
复制代码

集成 prettier

  1. 安装
yarn add prettier
复制代码
  1. WebStorm 设置

vite 命令

vite // 启动开发服务器
vite build // 为生产环境构建产物
vite preview // 本地预览生产构建产物
复制代码

我是阿壮,一个有情怀的程序员,微信搜一搜: 科技猫,获取第一时间更新,我们下期见

文章分类
前端