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框架，就看着官网的配置进行设置吧