vite+vue3实用依赖安装

1. ECharts

引入

通过npm安装echarts

npm install echarts@4.9.0 --save

在main.js中引入echarts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import * as echarts from "echarts"; //引入

const app = createApp(App);
// app.config.productionTip = false;
app.config.globalProperties.$echarts = echarts; //添加到全局

app.mount('#app')

💡注意：全局挂载开发不会有问题，但是打包部署到nginx上会报错，因此正常使用通常选择两种方式

  1. 组件中引入
  2. 在App.vue中引入，子组件就可以直接使用(自己测试发现好像不能这样)

2. Axios

引入

通过npm安装axios

npm install axios --save

封装

通常开发中，axios不会直接使用，而是先封装一下

在根目录创建.env.development和.env.production文件
VITE_APP_TITLE = "xhx"
# 端口号 
VITE_APP_PORT = "3000"
# 请求接口 
VITE_APP_DEV_URL = "不同环境对应的请求地址"
# 前缀 
VITE_APP_BASE_API = "/api"
在src目录下创建request文件夹，并在request文件夹下创建index.js(.ts)文件
// index.ts
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";

// 创建实例
const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL,
    timeout: 5000,
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(function(config: AxiosRequestConfig) {
    // 在发送请求前做的操作

    return config;
}, function(error) {
    // 对请求错误做的操作

    return Promise.reject(error);
})

// 添加响应拦截器
axiosInstance.interceptors.response.use(function(response: AxiosResponse) {
    // 对2xx的状态码触发该函数
    // 对响应做的操作
    return response;
}, function(error) {
    // 对超出2xx范围的状态码触发该函数
    // 对响应错误做的操作
    return Promise.reject(error);
})

export default axiosInstance;
然后在src目录下新建api文件夹，并在其下面创建index.js(.ts)文件
// index.ts
import request from '../request'

// 示例
export const login = (data) => {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

3. Sass

引入

npm install sass --save-dev

全局样式设置

在assets文件夹下创建scss目录，添加globalMixin.scss和globalVar.scss文件

下面是一个示例

//globalVar.scss
$bg-color: #1989fa;


//globalMixin.scss
@mixin box-shadow($bulr: 20px, $color: #1989fa7a) {
  -webkit-box-shadow: 0px 0px $bulr $color;
  -moz-box-shadow: 0px 0px $bulr $color;
  box-shadow: 0px 0px $bulr $color;
}

全局引入

在vite.config.js文件中，添加配置信息

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
   //配置sass
   css: {
    preprocessorOptions: {
      scss: {
        // '@import "assets/scss/globalVar.scss";@import "assets/scss/globalMixin.scss";'
        additionalData: '@import "../assets/scss/globalVar.scss";@import "../assets/scss/globalMixin.scss";'
      }
    }
  },
})

然后就可以在样式中使用了

.box {
    width: 200px;
    height: 200px;
    background-color: $bg-color;
    @include box-shadow;
}

4. tailwindcss

引入

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

创建配置文件

输入下面命令生成tailwind.config.js和postcss.config.js文件(如果是vite项目中生成的后缀名为.cjs)

npx tailwindcss init -p

vite中生成的tailwind.config.cjs内容如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}", /** 生成后需要加上这句，不然会报错 */
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

全局引入

在src目录下创建index.css文件

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在main.js中引入

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css' //引入tailwind基础样式

createApp(App).mount('#app')

5. router

引入

npm install vue-router@4

配置路由

在src目录下新建文件夹router，并在该文件夹下创建index.js(.ts)文件

// index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'HelloWorld',
    component:()=>import('@/components/HelloWorld.vue'),
  }
]

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

export default router

在main.js(.ts)中挂载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router' // 引入路由配置

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

修改App.vue管理路由

<script setup lang="ts">
</script>
<template>
  <!-- 这里将helloword组件替换为router-view -->
  <router-view></router-view>
</template>

<style>

</style>

6. element-plus

引入

npm install element-plus --save

在main.js(.ts)中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus' // 引入element-plus
import 'element-plus/dist/index.css' // 引入element-plus的样式

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

7. pinia

引入

npm install pinia

全局引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from "pinia"; // 引入pinia
const pinia = createPinia();

createApp(App).use(pinia).mount('#app')

配置store

在src目录下创建store文件夹，再在文件夹下面创建对应模块的文件

//src/store/user.ts
import { defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
  // 其它配置项
    state: () => {
        return {
            name: "李华",
            age: 25,
            sex: "男",
        }
    },
})