乐趣区

关于前端:为什么越来越多的人弃坑-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 // 本地预览生产构建产物 

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

退出移动版