快速上手 vite + vue3+tailwindcss+elementPlus

阳先森
2,383 阅读3分钟

项目介绍

本文主要介绍vite2、vue3、tailwindcss、elementPlus、axios和lodash快速工程搭建

完整项目地址访问地址 码云地址

创建项目

vite创建项目

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev

vue-router

安装vue-router

yarn add vue-router@4

创建router文件

创建 src/router/index.js 文件，创建路由时，建议使用路由懒加载，优化访问性能。

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/components/Home.vue'

const routes = [
    {
        name: 'home',
        path: '/',
        meta: {
            title: '首页'
        },
        component: Home,
        children: [
      
        ]
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

main.js引入router

import { createApp } from 'vue'
import App from './App.vue' 
import router from './router/index' 
createApp(App).use(router).mount('#app')

使用 router-view 组件

在 App.vue 文件中使用 router-view 组件，路由匹配到组件会通过 router-view 组件进行渲染。

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

安装vuex

执行安装命令

yarn add vuex@next
复制代码

创建store文件

创建 src/utils/storage 文件

/**
 * Storage二次封装
 * @author lee
 */
import config from './../config'
export default {
    setItem(key,val){
        let storage = this.getStroage();
        storage[key] = val;
        window.localStorage.setItem(config.namespace,JSON.stringify(storage));
    },
    getItem(key){
        return this.getStroage()[key]
    },
    getStroage(){
        return JSON.parse(window.localStorage.getItem(config.namespace) || "{}");
    },
    clearItem(key){
        let storage = this.getStroage()
        delete storage[key]
        window.localStorage.setItem(config.namespace,JSON.stringify(storage));
    },
    clearAll(){
        window.localStorage.clear()
    }
}

创建 src/store/index.js 文件

/**
 * Vuex状态管理
 */
import { createStore } from 'vuex'
import mutations from './mutations'
import storage from './../utils/storage'

const state = {
    userInfo: "" || storage.getItem("userInfo") // 获取用户信息
}
export default createStore({
    state,
    mutations
})

创建 src/store/mutations.js 文件

/**
 * Mutations业务层数据提交
 */
import storage from './../utils/storage'

export default {
    saveUserInfo(state,userInfo){
        state.userInfo = userInfo;
        storage.setItem('userInfo',userInfo)
    }
}

引入vuex

在 main.js 文件中 vue 示例中 use store，这样我们就可以在页面编码中使用全局状态管理插件 vuex 啦。

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

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

引入lodash

安装

npm i --save lodash

main.js中引入

import _ from 'lodash'

app.config.globalProperties._ = _;

引入 element-plus

安装

# Yarn
$ yarn add element-plus

引入

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(router).use(store).use(ElementPlus,{size:'small'}).mount('#app')

全局引入css会造成vite编译的时候报@charset" must be the first rule in the file

所以我们需要进行按需加载引入，对vite.config.js进行配置

首选需要下载 unplugin-vue-components and unplugin-auto-import.

npm install -D unplugin-vue-components unplugin-auto-import

然后进行配置

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

引入axios

安装

yarn add axios

创建公共函数(src/api/index.js)

//api/index.js
/**
 * api管理
 */
import request from './../utils/request'
export default {
    login(params) {
        return request({
            url: '/users/login',
            method: 'post',
            data: params,
        })
    }
}

封装axios(src/utils/request.js)

// request.js
/**
 * axios二次封装
 */
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from './../router'
import storage from './storage'
const { VITE_API } = import.meta.env

const TOKEN_INVALID = 'Token认证失败，请重新登录'
const NETWORK_ERROR = '网络请求异常，请稍后重试'

// 创建axios实例对象，添加全局配置
const service = axios.create({
    baseURL: VITE_API,
    timeout: 8000
})

// 请求拦截
service.interceptors.request.use((req) => {
    const headers = req.headers;
    const { token } = storage.getItem('userInfo');
    if (!headers.Authorization) headers.Authorization = 'Bearer ' + token;
    return req;
})

// 响应拦截
service.interceptors.response.use((res) => {
    const { code, data, msg } = res.data;
    if (code === 200) {
        return data;
    } else if (code === 500001) {
        ElMessage.error(TOKEN_INVALID)
        setTimeout(() => {
            router.push('/login')
        }, 1500)
        return Promise.reject(TOKEN_INVALID)
    } else {
        ElMessage.error(msg || NETWORK_ERROR)
        return Promise.reject(msg || NETWORK_ERROR)
    }
})
/**
 * 请求核心函数
 * @param {*} options 请求配置
 */
function request(options) {
    options.method = options.method || 'get'
    if (options.method.toLowerCase() === 'get') {
        options.params = options.data;
    }
    service.defaults.baseURL = VITE_API
    return service(options)
}

['get', 'post', 'put', 'delete', 'patch'].forEach((item) => {
    request[item] = (url, data, options) => {
        return request({
            url,
            data,
            method: item,
            ...options
        })
    }
})

export default request;

配置多环境

新建env.dev env.test env.prod

// env.dev

NODE_ENV=develpoment

# base api
VITE_API = 'http://bbbbbb/api/v1/'

# 打包的名称设置
VITE_FILE = 'dist-dev'


// env.test
NODE_ENV=develpoment

# base api
VITE_API = 'http://testkcxtbi.kakahui.net/api/v1/'

# 打包的名称设置
VITE_FILE = 'dist-test'


// env.prod
NODE_ENV=production

# base api
VITE_API = 'http://testkcxtbi.kakahui.net/api/v1/'

# 打包的名称设置
VITE_FILE = 'dist-prod'

修改vite.config.js

import _ from 'lodash';

const envResolve = (mode) => {
  return loadEnv(mode, process.cwd());
};

// 第三步 传 要读取的 参数 key
const getEnv = function (env) {
  //  我这里采用了lodash 读取 环境名 
  return envResolve(_.last(process.argv))[env];
}
// 第四步 使用
getEnv('VITE_FILE')


// https://vitejs.dev/config/
export default defineConfig({
  build: {
    outDir: getEnv('VITE_FILE')
  }
})
avatar
文章
阅读
粉丝