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

技术：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# 安装vue3npm install vue@nextnpm install vue-router@4.0.0npm 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.

清理缓存

# 清理 npm 缓存
npm cache clean --force# 或者 yarn 缓存
yarn cache clean