从0到1创建vite_vue3的项目
前言
大家好,我是yma16,本文分享认识vite_vue3 初始化项目到打包
背景
vue2在使用过程中对象的响应式不好用新增属性的使用$set才能实现效应式渲染,使用this变量比较泛滥,用起来费劲。
vue3速度更快,可以使用ts语法,前端后浪。
vite是什么
Vite是一个基于浏览器的前端构建工具,它能够在开发过程中提供快速的热更新和预构建能力,使得开发者在开发过程中能够更快地进行构建、编码和调试。它支持Vue、React和Angular等常见的前端框架,并且使用ESBuild作为其构建引擎,大大提高了构建速度。同时,Vite还提供了丰富的插件和工具,帮助开发者更好地完成前端开发工作。
vite配置
Vite是一个快速的前端构建工具,可用于开发现代web应用程序。以下是Vite配置的基本步骤:
-
安装Vite:在全局安装前,请确保您的Node.js版本>=12.0.0。
npm install -g vite
-
创建一个新的Vite项目:
mkdir my-vite-app cd my-vite-app npm init vite
3.根据需要选择框架(如React、Vue.js等)和模板(如JavaScript、TypeScript等)。
-
在项目的根目录中创建一个vite.config.js文件,并配置您的项目:
// vite.config.js export default { // 配置选项 }
-
配置选项:
- server.port:更改默认端口号(默认为3000)。
- server.open:是否在启动dev服务器时自动打开浏览器。
- build.outDir:输出目录的路径(默认为dist)。
- build.minify:是否在构建时压缩代码。
- build.sourcemap:是否将源映射嵌入到构建文件中。
更多配置选项,请访问Vite官方文档。
-
运行Vite:
npm run dev
这将启动开发服务器并在浏览器中打开您的应用程序。
-
构建您的应用程序:
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
结束
本文分享到这结束,如有错误或者不足之处欢迎指出,感谢大家的阅读!