vue3初步使用笔记

最近搭建了一个疫情车辆管理系统，采用的是vue3+Arco Design+vite, 使用起来很不错，特别vite也太快了吧，本文主要记录下vue3、vite.

Vite创建应用（vue/react）

npm create vite@latest

Vite配置环境变量

新建环境变量文件

// 开发环境
.env.development
# 必须指定
VITE_MODE_NAME=development
VITE_LOCAL_BASE_API = 'http://192.168.0.155:8090'


// 生产环境
.env.production
# 必须指定
VITE_MODE_NAME=production
VITE_LOCAL_BASE_API = 'http://192.168.0.155:8090'

在Axios等文件中引用

import.meta.env.VITE_LOCAL_BASE_API

在vite.config.js中引用

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {

    const env = loadEnv(mode, __dirname)

    return {
        server: {
          host: '0.0.0.0',
          port: '8090',
          proxy: {
            '/api': {
              target: env.VUE_APP_LOCAL_BASE_API,
              rewrite: (path) => path.replace(/^api/, '')
            }
          }
        }
    }
})

Vite配置别名

// vite.config.js

import { resolve } from 'path'

resolve: {
	alias: [{
        find: '@',
        	replacement: resolve(__dirname, 'src')
     }]
},

vite更多配置项文档

https://vitejs.dev/config/

vue3使用scss

安装

npm i sass -D

配置vite.config.js

// 全局css
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/reset.scss";`,
      }
    }
  }

此时 全局css会不生效

解决办法：

在app.vue中 随便写个样式即可, lang=scss

<style lang="scss">
a{
	// do something
}
</style>

Vue3使用JSX

安装@vitejs/plugin-vue-jsx

npm i @vitejs/plugin-vue-jsx -D

配置vite.config.js

import vueJsx from '@vitejs/plugin-vue-jsx'
import { defineConfig, loadEnv } from 'vite'


export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  return {
    plugins: [vue(), vueJsx({})],
   }
})

使用：

script 标签一定要加lang="jsx"

<script setup lang="jsx">
render: () => {
    return (
        <>
            <dx-button status="warning" type="text">编辑</dx-button>
            <dx-button status="danger" type="text">删除</dx-button>
        </>
    )
}
</script>

router

基本和vue2中使用区别不大

安装

npm i vue-router@4 -S

配置 router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Layout from "../layout/index.vue";

const routes = [
  {
    path: "/",
    redirect: 'home',
    component: Layout,
    children: [
      {
        path: '/home',
        name: 'home',
        component: () => import('../views/index.vue'),
        meta: {
          title: "首页"
        }
      },
      {
        path: '/404',
        name: '404',
        component: () => import('../views/error/404.vue'),
        meta: {
          title : '404 not found'
        }
      },
    ]
  },
]

export default createRouter({
  history: createWebHistory(),
  routes,
});

挂载到main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './routers';

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

配置挂载点：

app.vue

<template>
	<router-view />
</template>

layout.vue

<template>
	<header></header>
	<main>
		<router-view />
	</main>
</template>

router的使用：

跳转页面：

import { useRouter } from "vue-router";

const router = useRouter()

router.push('/')

获取router参数

import { useRoute } from "vue-router";

const route = useRoute()

console.log(route.query)
console.log(route.matched)

vuex

安装

npm install vuex@next --save

配置store/index.js

import { createStore } from "vuex";

export default createStore({
  state() {
    return {
		user: {},
    };
  },
  mutations: {
    SAVE_USER: (state, user) => {
      state.user = user
    },
  },
  actions: {
      login({commit}, res) {
          commit('SAVE_USER', res.user)
      },
  }

挂载到main.js

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

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

使用

和在vue2中使用一致，没区别， vue3中据说推荐使用pinia

获取state参数

import store from "../store";
const user = store.state.user;

使用mutations

import store from "../store";
store.commit('SAVE_USER', user)

调用actions

import store from "../store";
store.dispatch("login");

Axios

Axios在vue3中使用和vue2无异

vue3使用echarts

安装

npm i echarts -S

使用

<template>
  <div id="histogramChart"></div>
</template>


<script setup>
import * as echarts from 'echarts'
import {onMounted, nextTick} from "vue";

	onMounted(() => { // 需要获取到element,所以是onMounted的Hook
      nextTick(() => {
        let myChart = echarts.init(document.getElementById("histogramChart"));
        myChart.setOption({
        	legend: {},
          grid: {
            left: '1%',
            right: '13%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {},
          dataset: {
            source: [
              ['product', '中高风险车辆', '营运车辆', '危险品车辆'],
              ['周一', 43.3, 85.8, 93.7],
              ['周二', 83.1, 73.4, 55.1],
              ['周三', 86.4, 65.2, 82.5],
              ['周四', 66, 53.9, 80],
              ['周五', 72.4, 60, 39.1],
              ['周六', 55, 69, 39.1],
              ['周日', 74, 59, 38],
            ]
          },
          xAxis: { type: 'category' },
          yAxis: {},
          series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        });
        window.onresize = function () { // 自适应大小
          myChart.resize();
        };
       })
</script>

Vite配置局域网访问

在vite.config.js中配置server

// vite.config.js

server: {
    host: '0.0.0.0',
    port: '8090',
}

才疏学浅，以上只是在搭建系统中遇到的，如有错误，还请赐教。

原文地址： https://blog.zhanghaoran.ren/article/html/vue3ChuBuShiYongBiJi.html

2022.2.21

---

2022.3.3 二次更新：依赖包版本、vite相关配置