从0到1搭建vue3+ts+vite+element-plus初始版本后台系统

开始前

首先请确保你的node.js版本>=12.0.0
因为vite是需要node.js版本>=12.0.0

脚手架搭建

npm init vite@latest

需要安装Create-Vite@6.3.1，输入y回车

填写项目名称回车

选择熟悉的框架回车，如vue

选择语法回车，如ts

根据方框里面的步骤执行

然后npm run dev，得到这个页面脚手架搭建成功！

下载element-plus

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

在main.ts中引入

// main.ts
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(ElementPlus)
app.mount('#app')

在页面中使用

最后效果如下

使用scss

下载scss，Vite已经内置了对 SCSS 的支持，通常不需要额外的配置

npm install sass --save-dev

如果要设置全局scss变量，在vite.config.ts添加配置

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


export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),// 设置 `@` 指向 `src` 目录
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/assets/styles/mixin.scss" as *;',
      }
    }
  }
})

自定义主题色
下载插件

npm install unplugin-vue-components unplugin-auto-import --save-dev

在mixin.scss中新增代码

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (//主题色
      "base": #fd33c7,
    ),
    "success": (//成功色
      "base": #67C23A,
    ),
    "warning": (//警告色
      "base": #E6A23C,
    ),
    "danger": (//危险色
      "base": #F56C6C,
    ),
    "error": (//错误色
      "base": #F56C6C,
    ),
    "info": (//信息色
      "base": #909399,
    ),
  ),
);

在vite.config.ts引入

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

//element组件配置（使用自定义主题颜色这里必须要设置）
plugins: [
    vue(),
    //element组件配置（使用自定义主题颜色这里必须要设置）
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass",
        })
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass",
        })
      ],
    })
],

配置路由

下载路由

npm install vue-router --save-dev

在src下创建router文件夹，里面创建index.ts文件

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/Home.vue'

const routes = [
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/About.vue')
  }
]

const router = createRouter({
  // createWebHistory history模式：url不带‘#’，需要后端做url适配，利于seo，适合销售项目
  // createWebHashHistory hash模式：url带‘#’，不需要做url适配，不利于seo，适合后端项目
  history: createWebHistory(),
  routes
})

export default router

在main.ts中引入路由

import router from './router'

app.use(router)

然后在app.vue中测试路由是否成功

  <router-view></router-view>
  <router-link to="/home">Home</router-link>
  <router-link to="/about">about</router-link>
  

配置axios

下载axios

npm install axios --save

配置环境变量，不同的环境会有不同的请求域名
开发环境：在根目录下新建.env.development文件

#【开发环境】 
NODE_ENV = 'development' 
VITE_APP_BASE_API = '你的地址'

测试环境：在根目录下新建.env.staging文件

# 【测试环境】 
NODE_ENV = 'staging' 
VITE_APP_BASE_API = '你的地址'

生产环境：在根目录下新建.env.production文件

# 【生产环境】 
NODE_ENV = 'production'
VITE_API_BASE_URL = '你的地址'

环境获取

import.meta.env.VITE_API_BASE_URL

在vite.config.ts中获取环境变量

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'

export default defineConfig(({ mode } ) => {
  const env = loadEnv(mode, process.cwd())
  console.log(env) //获取环境变量
  return {
    plugins: [
      vue()
    ],
})

package.json多环境配置

"scripts": {
    "dev": "vite --host 0.0.0.0",            // 开发环境
    "serve": "vite preview",  // 本地预览
    "staging": "vite build --mode staging",  // 测试环境打包
    "build": "vite build"    // 生产环境打包
  }

解决跨域
在vite.config.ts文件里加上

server: {
  open: true, //  true 自动打开浏览器自动打开浏览器
  // https: false,
  cors: true, // 跨域设置允许
  proxy: {
    '/api': {
      target: env.VITE_APP_BASE_API,  // 后端API地址
      changeOrigin: true,  // 是否修改请求头中的Origin
      rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
    },
  }
},

在src下创建utils文件夹request.ts文件

import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: '/api', // 设置请求的基地址
  timeout: 5000, // 请求超时时间
  headers:{
    //公共请求头配置，本项目请求头大多数接口是这个，所以这里可以配置一下，对于特殊接口单独配置
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  }
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 例如：添加token到header中
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权的错误
          console.error('未授权，请重新登录');
          break;
        case 404:
          // 处理资源不存在的错误
          console.error('请求的资源不存在');
          break;
        default:
          console.error('请求失败，请稍后再试');
      }
    } else if (error.request) {
      console.error('请求失败，请检查网络连接');
    } else {
      console.error('请求配置错误');
    }
    return Promise.reject(error);
  }
);
 
export default service;

在src下创建api文件夹getData.ts文件

import request from '@/utils/request.ts';

//获取用户信息
export function getData() {
  return request({
    url: `/getData`,
    method: 'get',
  });
}

在组件中调用

import { onMounted, ref } from 'vue'
onMounted(() => {
  getData().then(response=>{
    console.log(response);
  })
})

配置pinia

下载pinia

npm install pinia

新建store文件夹index.ts文件

import { defineStore } from 'pinia';

export const useMainStore = defineStore('main', {
  state: () => ({
    // 你的状态
    text: 'pinia1'
  }),
  actions: {
    // 你的 actions
    updatetext() {
      this.text = '我变了'
    }
  },
});

在main.ts引入

import {createPinia} from 'pinia'

app.use(createPinia())

组件中使用

<template>
    <div @click="update">我是pinia {{ store.text }}</div>
  </template>
  
  <script setup>
  
import {useMainStore} from "@/store/index.ts"
let store=useMainStore()

let update=()=>{
    // 调用修改方法 store.你在pinia中actions中创建的修改函数
    store.updatetext()
}
  </script