皮革 东莞网站建设,代理记账公司注册条件,网络培训心得体会5篇,51素材免费下载从0到1创建vite_vue3的项目背景效果vite介绍#xff08;对比和vuecli的区别#xff09;使用npm创建vitevitevuie3创建安装antdesignvite自动按需引入#xff08;vite亮点#xff09;请求代理proxy打包背景
vue2在使用过程中对象的响应式不好用新增属性的使用$set才能实现效…
从0到1创建vite_vue3的项目背景效果vite介绍对比和vuecli的区别使用npm创建vitevitevuie3创建安装antdesignvite自动按需引入vite亮点请求代理proxy打包背景
vue2在使用过程中对象的响应式不好用新增属性的使用$set才能实现效应式渲染使用this变量比较泛滥用起来费劲。 vue3速度更快可以使用ts语法前端后浪。
效果 vite介绍对比和vuecli的区别
vite官方https://cn.vitejs.dev/guide/why.html Vite 天然支持引入 .ts 文件。 Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍
使用npm创建vite
三种方式 创建vite项目
$ npm create vitelatest
$ yarn create vite
$ pnpm create vitevitevuie3创建
$ npm create vitelatest yma16-study --template vue选择vue 选择typescript npm i npm run de即可运行
安装antdesign
$ npm install ant-design-vue --savemain.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 :localelocalediv idapprouter-view//div/a-config-providervite自动按需引入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结束感谢阅读
