vue2+webpack用了几年时间了，现在vue3越来越火，据说vite的打包速度非常快，这里就记录一下vue3+vite的一些简单的入门内容
项目创建
项目创建也是通过npm命令就可以了
-
npm init vite-app demo
#demo是项目名
-
#跳转到项目的根目录，然后install
-
npm install
-
# 本地运行
-
npm run dev
这样项目就创建好了
必备工具
eventBus不能用的解决方案
用习惯vue的人，肯定经常使用eventBus。在刚刚创建的项目中，会发现就没有办法配置eventBus，这是因为Vue已经弃用了eventBus，可以通过插件mitt来替代。
- 安装插件
npm install --save mitt- 简单封装
在项目中创建bus.js，内容如下：
-
import mitt
from
'mitt'
-
-
const bus = {}
-
-
const emitter = mitt()
-
-
bus.$on = emitter.on
-
bus.$off = emitter.off
-
bus.$emit = emitter.emit
-
-
export
default bus
- 引入
在main.js文件中引入
-
import { createApp }
from
'vue'
-
import App
from
'./App.vue'
-
import
'./index.css'
-
import Bus
from
'./bus'
-
-
const app=createApp(App);
-
app.config.globalProperties.$bus = Bus
-
-
app.mount(
'#app');
- 使用
-
this.$bus.$on(
'test',res=>{
-
console.log(res)
-
})
-
this.$bus.$emit(
'test',
"111")
多环境打包
做前端开发，我们经常遇到不同的环境打不通的包，使用不同的接口地址，vue3+vite的多环境打包和vue2+webpack变化还是非常大的。
- 在项目的根目录下新建.env.development、.env.production、.env.test三个文件
- 以.env.development为例展示其中的内容，
-
NODE_ENV=development
-
-
VITE_BASESERVER= 'http://****:8849/server-base/api/v1'
-
VITE_API_AUTH= 'http://****:8849/api-auth/api/v1'
注意，后面不用加分号，注释也不能加载url后面，常量名也必须已VITE_开头
-
- 代码中引用
let url=import.meta.env.VITE_BASESERVER + '/feature/add'- 配置打包命令
在package.json文件里配置打包命令，使用不同环境
-
"dev":
"vite",
-
"build:test":
"vite build --mode test",
-
"build:pro":
"vite build --mode production"
使用Vue router
- 默认vue3+vite里是没有router的，需要自己配置
npm install vue-router@next --save - 创建router文件夹，并在里面创建index.js,index.js内容为
-
import { createRouter, createWebHistory }
from
'vue-router'
-
import Home
from
'../views/Home.vue'
//自己创建的页面
-
import BackStage
from
'../views/BackStage.vue'
//自己创建的页面
-
-
-
const routerHistory = createWebHistory()
-
-
const router = createRouter({
-
history: routerHistory,
-
routes: [
-
{
-
path:
'/',
-
component: Home
-
},
-
{
-
path:
'/contact',
-
component: BackStage
-
}
-
]
-
})
-
-
-
export
default router
-
-
在main.js 中引入
-
import { createApp }
from
'vue'
-
import App
from
'./App.vue'
-
import
'./index.css'
-
import Bus
from
'./bus'
-
import router
from
'./router'
-
-
const app=createApp(App);
-
app.config.globalProperties.$bus = Bus
-
app.use(router)
-
.mount(
'#app');
配置VueX
- 安装依赖
npm install vuex@next- 创建store文件夹，并创建store.js
-
import { createStore }
from
"vuex";
-
-
export
default createStore({
-
state() {
-
return {
-
count:
0,
-
};
-
},
-
mutations: {
-
add(state) {
-
state.count++;
-
},
-
},
-
actions: {
-
add(context) {
-
context.commit(
"add");
-
},
-
},
-
});
- 在main.js中引用
-
import { createApp }
from
'vue'
-
import App
from
'./App.vue'
-
import
'./index.css'
-
import Bus
from
'./bus'
-
import store
from
'./store/store'
-
import router
from
'./router'
-
-
const app=createApp(App);
-
app.config.globalProperties.$bus = Bus
-
-
app.use(router)
-
.use(Bus)
-
.use(store)
-
.mount(
'#app');
- 代码中调用
-
computed: {
-
test() {
-
return
this.$store.state.test;
-
},
-
},
其他
至于element-plus之类的ui框架，就看着官网的配置进行设置吧
转载：https://blog.csdn.net/GISuuser/article/details/115916671
查看评论