在vue3项目中加载element-plus,windicss,vue-router，axios

_GuGu_

已于 2024-01-11 10:32:21 修改

阅读量191 vue 文章标签： vue.js 前端 javascript

于 2023-11-03 21:35:40 首次发布

本文链接：https://blog.csdn.net/m0_58235310/article/details/134210860

vue 专栏收录该内容

31 篇文章 0 订阅

一.首先你要有node.js环境（没有的话请去b站找教程）

二.打开你要建立文件的位置，我使用的是vscode。

在这里，打开终端运行

npm create vue@latest

完成以下选择：

三.在新建的文件中把components底下的文件删除

四.找到App.vue，删除底下的代码，变成如下图：

五.打开element-plus官网：翻译 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/guide/translation.html

找到安装教程，如下：

npm install element-plus --save

复制出npm这一列的代码，在终端运行：

然后打开element-plus官网，找到“快速开始”：

按照上述官网内容进行main.js的更改：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

六.打开windi-css官网：Vite 集成 | Windi CSS下一代工具类 CSS 框架https://cn.windicss.org/integrations/vite.html

安装教程选择vite：

npm i -D vite-plugin-windicss windicss

按照这里的教程更改vite.config.js：

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

更改main.js如下：

import 'virtual:windi.css'

七.打开vue router官网：入门 | Vue RouterVue.js 的官方路由https://router.vuejs.org/zh/guide/

安装教程如下：

cnpm install vue-router@4

在终端运行如下代码：

然后就不安装教程走了。

在你的项目文件中，src文件夹下，新建一个router文件，再在router文件夹下新建一个index.js文件。

在index.js文件中写如下代码：

import {
    createRouter as _createRouter,
    createWebHashHistory,
} from 'vue-router'

// import index from "~/pages/index.vue"
const routes = [
]

//这里有错误，不知道什么原因只能使用函数返回，直接定义会报错
function createRouter() {
    return _createRouter({
        history: createWebHashHistory(),
        routes
    })
}

const router = createRouter()

export default router

在main.js下写如下代码：

到这里就完成了一个vue项目的基本创建。这些在项目中是最基本的。

main.js代码：

import './assets/main.css'


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


import 'virtual:windi.css'

const app = createApp(App)
import router from './router'
app.use(router)
app.use(ElementPlus)
app.mount('#app')

vite.config.js代码：

import { fileURLToPath, URL } from 'node:url'

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

import WindiCSS from 'vite-plugin-windicss'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

router/index.js代码：

import {
    createRouter as _createRouter,
    createWebHashHistory,
} from 'vue-router'

// import index from "~/pages/index.vue"
const routes = [
]

//这里有错误，不知道什么原因只能使用函数返回，直接定义会报错
function createRouter() {
    return _createRouter({
        history: createWebHashHistory(),
        routes
    })
}

const router = createRouter()

export default router

八 .打开axios官网axios中文网|axios API 中文文档 | axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。http://www.axios-js.com/

安装axios：

cnpm install axios

然后在src文件夹下，新建一个axios.js用于存放请求响应的地址

在aixos.js里写如下代码：

import axios from 'axios'
const server = axios.create({
    baseURL:"http://127.0.0.1"//本地域名
})
export default server;

九.打开element-plus的icon官网

cnpm install @element-plus/icons-vue

在main.ts中引用

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}