vue3搭建项目yarn+vue3+webpack+less+element-plus

技术：vue3 yarn webpack Element Plus

1.创建项目

yarn 方法

bash 复制代码

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

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

npm 方法

bash 复制代码

#---------------------------------------------
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 方法

bash 复制代码

cd my-vue3-webpack-app
yarn serve

npm 方法

bash 复制代码

cd my-vue3-webpack-app
npm run serve

3.安装插件

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

yarn 方法

bash 复制代码

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

npm 方法

bash 复制代码

 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

bash 复制代码

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

bash 复制代码

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

<script  setup>
</script>

<style>
</style>

修改App.vue

bash 复制代码

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

修改main.js

bash 复制代码

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

修改vue.config.js

bash 复制代码

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

bash 复制代码

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

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

全局配置

bash 复制代码

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

variables.less 定义变量

bash 复制代码

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

index.vue使用

bash 复制代码

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

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

bash 复制代码

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

bash 复制代码

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')

bash 复制代码

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

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

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

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

bash 复制代码

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. 清理缓存

bash 复制代码

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

# 或者 yarn 缓存
yarn cache clean