vue3+element+AntDesign(自动导入)+pina+vite+js+pnpm搭建项目框架

vue3+element+AntDesign(自动导入)+pina+vite+js+pnpm搭建项目框架

---

---

要搭建一个基于Vue 3的项目框架，并使用Element UI、Ant Design、Pina、Vite、JavaScript和pnpm，可以按照以下步骤进行操作：

1. 安装pnpm：通过以下命令安装pnpm，它是一个快速、零配置的包管理工具。

npm install -g pnpm

2. 初始化项目：在命令行中执行以下命令，使用pnpm初始化一个新项目。

pnpm init vite@latest my-project

3. 安装Vue 3：进入项目文件夹并安装Vue 3。

cd my-project
pnpm add vue@next

4. 安装Element UI：使用以下命令安装Element UI。

pnpm add element-plus

5. 安装Ant Design：使用以下命令安装Ant Design。

pnpm add ant-design-vue@next

6. 安装Pina：使用以下命令安装Pina。

pnpm add pinia@next

7. 配置Vite：在项目根目录创建一个vite.config.js文件，配置Vite的插件和别名。

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js'),
    },
  },
})

8. 创建src/icons.js文件：在项目的src目录下创建一个icons.js文件，用于自动导入Ant Design的图标。

import { createFromIconfontCN } from '@ant-design/icons-vue'

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1234567_abcd1234.js',
})

export default IconFont

记得将上面的URL替换为你自己的图标库地址。

9. 配置Pina：在项目的src目录下创建一个store.js文件，用于配置Pina和导出Store实例。

import { createPinia } from 'pinia'

export const store = createPinia()

export function useStore() {
  return store
}

在main.js中引入上面的store.js并使用。

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'

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

10. 修改main.js：将main.js中的import '@/assets/style.css'替换为import 'element-plus/lib/theme-chalk/index.css'，以引入Element UI的样式。

11. 修改App.vue：修改App.vue中的模板，引入Element UI和Ant Design的组件。

<template>
  <div id="app">
    <el-button>Element Button</el-button>
    <a-button type="primary">Ant Design Button</a-button>
  </div>
</template>

<script>
import { useStore } from './store'

export default {
  name: 'App',
  setup() {
    const store = useStore()

    return {
      store,
    }
  },
}
</script>

<style>
/* Add your custom styles here */
</style>

12. 运行项目：执行以下命令启动开发服务器。

pnpm dev

这样，就搭建好了一个基于Vue 3的项目框架，使用了Element UI、Ant Design、Pina、Vite、JavaScript和pnpm。你可以根据需要进一步开发和配置项目。

14. git 地址：https://gitee.com/Beichenguren/vue3-web