认识vite_vue3 初始化项目到打包

前言

大家好，我是yma16，本文分享认识vite_vue3 初始化项目到打包

背景

vue2在使用过程中对象的响应式不好用新增属性的使用$set才能实现效应式渲染，使用this变量比较泛滥，用起来费劲。
vue3速度更快，可以使用ts语法，前端后浪。
vite是什么
Vite是一个基于浏览器的前端构建工具，它能够在开发过程中提供快速的热更新和预构建能力，使得开发者在开发过程中能够更快地进行构建、编码和调试。它支持Vue、React和Angular等常见的前端框架，并且使用ESBuild作为其构建引擎，大大提高了构建速度。同时，Vite还提供了丰富的插件和工具，帮助开发者更好地完成前端开发工作。
vite配置
Vite是一个快速的前端构建工具，可用于开发现代web应用程序。以下是Vite配置的基本步骤：

1. 安装Vite：在全局安装前，请确保您的Node.js版本>=12.0.0。

   npm install -g vite
   

2. 创建一个新的Vite项目：

   mkdir my-vite-app
   cd my-vite-app
   npm init vite
   

3.根据需要选择框架（如React、Vue.js等）和模板（如JavaScript、TypeScript等）。

4. 在项目的根目录中创建一个vite.config.js文件，并配置您的项目：

   // vite.config.js
   export default {
     // 配置选项
   }
   

5. 配置选项：

   • server.port：更改默认端口号（默认为3000）。
   • server.open：是否在启动dev服务器时自动打开浏览器。
   • build.outDir：输出目录的路径（默认为dist）。
   • build.minify：是否在构建时压缩代码。
   • build.sourcemap：是否将源映射嵌入到构建文件中。

   更多配置选项，请访问Vite官方文档。

6. 运行Vite：

   npm run dev
   

   这将启动开发服务器并在浏览器中打开您的应用程序。

7. 构建您的应用程序：

   npm run build
   

   这将使用Vite构建您的应用程序，并将构建文件输出到指定的目录中。

   以上是Vite配置的基本步骤和示例，更多详细信息请查阅Vite官方文档。

效果

vite介绍（对比和vuecli的区别）

vite官方：https://cn.vitejs.dev/guide/why.html
Vite 天然支持引入 .ts 文件。
Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍

使用npm创建vite

三种方式 创建vite项目

$ npm create vite@latest
$ yarn create vite
$ pnpm create vite

vite+vuie3创建

$ npm create vite@latest yma16-study --template vue

选择vue

选择typescript

npm i & npm run de即可运行

安装antdesign

$ npm install ant-design-vue --save

main.ts入口

import { createApp } from "vue";
// @ts-ignore
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
// @ts-ignore
import Router from "./router/index";
// @ts-ignore
import store from "./store/index.js";
const app = createApp(App);
app.use(Antd);
app.use(Router);
app.use(store);
app.mount("#app");

国际化配置antd

  <a-config-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </a-config-provider>

vite自动按需引入（vite亮点）

请求代理proxy

  server: {
    port: 3000,
    open: true,
    cors: true,
    proxy: {
      "^/cloudApi/": {
        // target: "https://yongma16.xyz/back-front",
        target: "http://localhost:9090/",
        changeOrigin: true,
        ws: true,
        rewrite: (path) => path.replace(/^\/cloudApi/, ""),
      },
    },
  }

打包

调整base路径打包

$ npm run build

结束

本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！