preface

It has been a long time since the official release of Vue3 and Vite, and the ecosystem has been gradually enriched, so it is necessary to experience it.

Start.

Project structures,

Use Vite to quickly initialize the project prototype

You can use NPM or YARN, and NPM is used in this article.

Initialization project:

npm init @vitejs/app
Copy the code

Then fill in and select as prompted:

1. Enter the project name

2. Select the template, in this case vUE

3. Select TS

The creation is complete. Then install dependencies:

npm i
Copy the code

Start the project

npm run dev
Copy the code

This is the power of Vite. It leverages the browser’s native ES module support and tools compiled into native languages to provide a fast and modern development experience. Vite’s development server is 10-100 times faster than Vue CLI.

Modify the Vite configuration file

The Vite configuration file vite.config.ts is located in the root directory and is automatically read when the project is started. This project first do some simple configuration, such as: set @ to SRC directory, service start port, packaging path, proxy, etc. For more configuration items and usage of Vite, visit the Vite official website.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      The '@': resolve(__dirname, 'src') // Set '@' to point to 'SRC'}},base: '/'.// Set the packing path
  server: {
    port: 8888.// Set the service startup port number
    open: true.// Set whether the browser opens automatically when the service starts
    cors: true // Allow cross-domain

    // Set the proxy according to the actual situation of our project
    // proxy: {
    // '/api': {
    // target: 'http://xxx.xxx.xxx.xxx:8000',
    // changeOrigin: true,
    // secure: false,
    // rewrite: (path) => path.replace('/api/', '/')
    / /}
    // }}})Copy the code

integrationVue Router Vuex Element Plus Axios

npm i vue-router@4 vuex@next element-plus axios -S
Copy the code

integrationVue Router

Create a page SRC /pages/home.vue:

<template>
  <div class="wrapper">
   home
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "home"});</script>

<style scoped>
</style>

Copy the code

Create SRC /router/index.ts file

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from 'vue-router'
import Home from '@/pages/home.vue'


const routes: Array<RouteRecordRaw> = [
  {
    path: '/'.name: 'Home'.component: Home
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

Copy the code

Mount the routing configuration in main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'


const app = createApp(App)
app.use(router)
app.mount('#app')

Copy the code

The route is created.

integrationVuex

Create. / SRC/store. Ts:

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}

// Create a new store instance.
export default createStore({
  state() {
    return defaultState
  },
  mutations: {
    increment(state: typeof defaultState) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')}},getters: {
    double(state: typeof defaultState) {
      return 2 * state.count
    }
  }
})

Copy the code

Inject vuex into main.ts:

import store from './store/index'


const app = createApp(App)
app.use(store)
app.mount('#app')

Copy the code

integrationElement Plus

In the main.ts file:

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(store)
app.use(router)
app.mount('#app')

Copy the code

The integration is complete here.

Project Git address

Develop reading

Next: Using Vue3 as a base on Quankun to build a micro front-end architecture