vue3项目创建以及插件安装

vue3项目创建以及插件安装

创建项目

npm init vite@latest
# 创建项目成功
cd xxx
npm install
npm run dev

解决@找不到的问题

打开vite.config.js

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

import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname,'./src'),
    }
  }
})

路由安装

npm install vue-router -S

配置router文件
在src目录下创建router文件夹，并创建index.js文件

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

const router = createRouter({
    routes: [
        {
            path:"/",
            component: () => import ("../view/Login.vue")
        },
        {
            name:"menu",
            path:"/menu",
            component: () => import ("../view/Menu.vue")
        }
    ],
    history: createWebHistory()
})

export default router;

别忘了在main.js中应用插件。
在main.js中将use(router)加在app中。重启即可。

element-plus及图标库安装

npm install element-plus --save

npm install @element-plus/icons-vue

安装好之后，配置在main.js中即可完成全局使用。图标如果不想在组件中单独引用，需要for (const name in ElIcons) { app.component(name, ElIcons[name]) }进行全局配置。

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
import router from './router/index'
/* 导入element-plus */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import * as ElIcons from '@element-plus/icons-vue'

const app = createApp(App);
for (const name in ElIcons) {
    app.component(name, ElIcons[name])
}

app.use(router).use(ElementPlus).mount('#app')