技术：vue3 yarn webpack Element Plus

1.创建项目

yarn 方法

#-------------------------------------
# yarn 方法 
yarn global add @vue/cli
# 2. 创建项目
vue create my-vue3-webpack-app

# 3. 在交互式菜单中选择 Vue 3
#   使用方向键选择 "Manually select features"
#   确保选中 "Vue Version" 并选择 3.x
#   其他选项按需选择

npm 方法

#---------------------------------------------
npm install -g @vue/cli
# 2. 创建项目
vue create my-vue3-webpack-app
# 3. 在交互式菜单中选择 Vue 3
#   使用方向键选择 "Manually select features"
#   确保选中 "Vue Version" 并选择 3.x
#   其他选项按需选择

# 4. 进入项目目录
cd my-vue3-webpack-app

# 5. 启动开发服务器
npm run serve

2.运行

yarn 方法

cd my-vue3-webpack-app
yarn serve

npm 方法

cd my-vue3-webpack-app
npm run serve

3.安装插件

当你需要退出正在运行的服务时，通常可以使用 ctr+Y ctr+C 组合键来停止服务。

yarn 方法

yarn add element-plus
 # 安装vue3
yarn add vue@next
yarn add vue-router@4.0.0
yarn add vuex@next

npm 方法

 npm install element-plus --save
 # 安装vue3
 npm install vue@next
 npm install vue-router@4.0.0
 npm install vuex@next --save

4.修改代码

（1）.修改以下代码添加路由

src下新增router/index.js

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "IndexPage",
    meta: { title: "正在打开" },
    component: () => import("@/page/indexPage"),
  }
  
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

添加page/indexPage.vue

<template>
	<div class="hello">
		111444
	</div>
</template>

<script  setup>
</script>

<style>
</style>

修改App.vue

<template>
	<router-view :key="route.fullPath"></router-view>
</template>
<script setup>
	import {useRoute} from 'vue-router'
	let route = useRoute();
</script>
<style>

修改main.js

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

修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  // Vue CLI 配置选项
  devServer: {
    port: 8080,
  },
  configureWebpack: (config) => {
      // 配置别名
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': resolve('src'),
        '@components': resolve('src/components'),
        '@views': resolve('src/views'),
        '@assets': resolve('src/assets'),
        '@utils': resolve('src/utils'),
        '@api': resolve('src/api'),
        '@store': resolve('src/store'),
        '@router': resolve('src/router')
      }
    }
  // 其他配置...
}
```bash

（2）.添加环境变量

.env.development .env.production 两个文件

如何添加.env.development .env.production 文件

（3）.全局添加element-plus

如何引用element-plus插件

5.安装less

# 使用 npm
npm install less less-loader --save-dev

# 使用 yarn
yarn add less less-loader -D

全局配置

#vue.config.js
module.exports = {
	css: {
		loaderOptions: {
			less: {
				additionalData: `@import "@/assets/styles/variables.less";`
			}
		}
	}
	// 其他配置...
}

variables.less 定义变量

@less-font-size-14:14px;

index.vue使用

<style lang="less">
	.main{
		font-size: @less-font-size-14;
	}
</style>

6.element-plus-icons 安装注册使用

npm install @element-plus/icons-vue
# 或者
yarn add @element-plus/icons-vue

import { createApp } from 'vue'
import App from './App.vue'
import { Edit, Search, Delete } from '@element-plus/icons-vue'

const app = createApp(App)

# // 按需注册图标
app.component('EditIcon', Edit)
app.component('SearchIcon', Search)
app.component('DeleteIcon', Delete)

app.mount('#app')

# //在特定的组件中局部注册图标。
<template>
  <div>
    <edit-icon />
  </div>
</template>

<script>
import { Edit } from '@element-plus/icons-vue'

export default {
  components: {
    EditIcon: Edit
  }
}
</script>

7.vuex模块引入、注册及常量配置

import store from './store'
createApp(App).use(ElementPlus).use(router).use(store).component('SearchIcon', Search).mount('#app')

代码配置参考：https://blog.csdn.net/qq_41521625/article/details/148850431?spm=1001.2014.3001.5502.

8.安装axios

npm install axios
# 或
yarn add axios

9.安装加密文件crypto-js

npm install crypto-js

yarn add crypto-js

10.添加接口文件，及统一接口处理文件,完成接口访问

#src/api/index.js
import request from "@/utils/request";

// 注册
export function register(data) {
  return request({
    url: "/userRegister",
    method: "post",
    data,
  });
}
export function login(params) {
  return request({
    url: "/userRegister",
    method: "get",
    params,
  });
}

#src/utils/request.js
import axios from "axios";
import Aes from "@/utils/aes-ecb";
import {
	ElMessage
} from 'element-plus'

// create an axios instance
const service = axios.create({
	baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
	timeout: 15000, // request timeout
});

const key = process.env.VUE_APP_AES_KEY;
const iv = process.env.VUE_APP_AES_IV;
// request interceptor
service.interceptors.request.use(
	(config) => {
		config.headers["XX-Token"] = localStorage.getItem('token',)
		config.headers["XX-Device-Type"] = "pc";
		if (config.method === "post") {
			const formdata = new FormData()

			const arr = Aes.encrypt(
				key,
				JSON.stringify(config.data),
				iv,
			)
			formdata.append('data', arr)
			config.data = formdata
		} else if (config.method === "get") {
			config.params = {
				data: Aes.encrypt(
					key,
					JSON.stringify(config.params),
					iv,
				)
			};
		}
		return config;
	},
	(error) => {
		ElMessage.error(error)
		return Promise.reject(error);
	}
);

// response interceptor
service.interceptors.response.use(
	(response) => {
		const res = response.data;
		if (res.code !== 0) {
			const errorMap = {
				10001: () => location.reload(),
				1: () => ElMessage.error(res.msg),
				// 其他错误码...
			}
			errorMap[res.code]?.()
			return Promise.reject(res)
		} else {
			res.data = Aes.decrypt(key, res.data, iv, );
			return res;
		}
	},
	(error) => {
		// Toast(error);
		ElMessage.error(error)
		return Promise.reject(error);
	}
);

export default service;

#src/page/index.vue
import {settingInfo} from '@/api/index.js'
onMounted(() => {
	serviceFun()
});
const serviceFun = async () => {
	settingInfo({ id:'3'}).then((res) => {
		console.log("res",res)
		if (res !== undefined) {
			name.value = res.data.name;
		} else {
			// ElMessage.error("请联系管理员！")
		}
	});
}

11. 设置token，完成登录及超时

安装js-cookie:

npm install js-cookie --save
yarn add  js-cookie --save

设置token，完成登录及超时

清理缓存

# 清理 npm 缓存
npm cache clean --force

# 或者 yarn 缓存
yarn cache clean