搭建最新vue3项目

一、项目搭建

1、创建项目

 npm init @vitejs/app saas 或者npm init vue@latest

2、安装router

2.1 安装

npm install vue-router@4 -S

2.2 配置

在src目录新建router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

3、unplugin-auto-import插件

3.1 安装

npm i unplugin-auto-import -D

3.2 配置vite.config.js

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

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

import AutoImport from 'unplugin-auto-import/vite'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      //自动配置插件
      AutoImport({
        imports: ['vue','vue-router']
      })
  ],
  resolve: {
    //配置路径别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

4、引入Element-plus

网址：https://element-plus.gitee.io/zh-CN/guide/installation.html 

4.1 安装

npm install element-plus --save

npm i unplugin-auto-import -D（自动导入工具，前面三已经安装了）

npm install unplugin-vue-components -D（组件自动导入）

npm install unplugin-icons -D（图标自动导入）

（使用样式：<el-icon><i-ep-Lock/></el-icon>，需要增加i-ep-）

npm install sass sass-loader unplugin-element-plus -D（样式自动导入）

4.2 配置vite.config.js

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

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

//自动导入工具
import AutoImport from 'unplugin-auto-import/vite'
//Element组件包
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//Element图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
//Element css样式
import ElementPlus from 'unplugin-element-plus/vite'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        //自动配置插件
        AutoImport({
            imports: ['vue','vue-router'],
            resolvers: [
                ElementPlusResolver(),
                IconsResolver({
                    prefix: 'Icon'
                })
            ]
        }),
        Components({
            resolvers: [
                ElementPlusResolver(),
                IconsResolver({
                    enabledCollections: ['ep']
                })
            ],
        }),
        Icons({
            autoInstall: true
        }),
        ElementPlus({
            useSource: true
        })
    ],
    resolve: {
        //配置路径别名
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

5、Pinia

5.1 安装Pinia与持久化插件

npm i pinia -D

npm i pinia-plugin-persist --save

5.2 配置

在main.js中配置

import { createApp } from 'vue'


import App from './App.vue'
import router from './router'

import store from './stores/index.js' //这个

const app = createApp(App)


app.use(store)                        //这个
app.use(router)

app.mount('#app')

在stores目录下新建index.js配置

import { createPinia } from 'pinia'
//引入pinia的持久化存储插件
import piniaPluginPersist  from 'pinia-plugin-persist'

const store = createPinia();
//使用持久化存储插件
store.use(piniaPluginPersist)

export default store

6、引入IconPark图标库

6.1 官网

https://iconpark.oceanengine.com/official

6.2 安装依赖

npm i @icon-park/vue-next

6.3 按需引入

在src目录下新增plugins目录，在目录下新建一个IconPark.js文件。

import { Play } from '@icon-park/vue-next'

export function IconPark (app) {
  app.component('Play', Play)
}

在main.js中配置引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { IconPark } from '@/plugins/iconPark'  //这个语句
const app = createApp(App)
IconPark(app)  //这个语句
app.use(store).use(router).mount('#app')

6.4 使用方法

// 直接引入
<play theme="multi-color" size="26" :fill="['#000000' ,'#000000' ,'#f8e71c' ,'#f8e71c']" :strokeWidth="3"/>

// 或者使用component引入
<component :is="'like'" :theme="'two-tone'" :fill="['#333', '#2F88FF']" />