使用vite+vue3+element-plus创建项目

使用vite创建一个vite+vue的项目

npm init vite@latest my-vue-app -- --template vue

添加依赖并运行
然后进入到刚刚创建的项目目录中安装依赖，并运行：

cd my-vue-app
npm install
npm run dev

添加路由

npm install vue-router@4

添加路由配置文件
添加完路由依赖以后需要在src目录下创建一个router文件夹，以及在router文件夹内创建一个它的配置文件——index.js，下面是index.js文件内容：

// 路由文件
import { createRouter, createWebHistory } from "vue-router";

import Home from '../views/Home.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

})

在最新的Vue Router中创建路由和使用历史模式的方法都发生了改变，其余使用方式大致相同。在main.js中添加路由

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index.js'

const app=createApp(App)
app.use(Router)
app.mount('#app')

在App.vue中使用router-view进行路由，让其显示

//App.vue

添加ElementUI-Plus
 

安装element-plus依赖

npm install element-plus --save

引入element-plus依赖

按需应用中的自动导入，按需应用可以减少打包后文件的大小
要使用按需引用中的自动导入需要安装额外的两个插件：

unplugin-vue-components和unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import

配置项目根目录的vite的配置文件——vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

使用插件unplugin-element-plus来自动导入样式，安装它前需要添加sass和sass-loader依赖

npm install sass sass-loader  unplugin-element-plus

然后在vite.config.js配置文件中添加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({
      useSource: true
    })
  ]
})

 

引入Element Icon

添加依赖

npm install @element-plus/icons-vue

将icon在main.js进行全局注册

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index.js'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
app.use(Router).mount('#app');
//全局注册Element Icon
for (let iconName in ElementPlusIconsVue) {
    app.component(iconName, ElementPlusIconsVue[iconName])
}

全局组件挂载（main,js）

import sideNav from './components/sideNav/index.vue'
app.component('sideNav', sideNav)