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

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

文章目录

• vue3+element+AntDesign(自动导入)+pina+vite+js+pnpm搭建项目框架
• • 1. 安装pnpm：通过以下命令安装pnpm，它是一个快速、零配置的包管理工具。
  • 2. 初始化项目：在命令行中执行以下命令，使用pnpm初始化一个新项目。
  • 3. 安装Vue 3：进入项目文件夹并安装Vue 3。
  • 4. 安装Element UI：使用以下命令安装Element UI。
  • 5. 安装Ant Design：使用以下命令安装Ant Design。
  • 6. 安装Pina：使用以下命令安装Pina。
  • 7. 配置Vite：在项目根目录创建一个`vite.config.js`文件，配置Vite的插件和别名。
  • 8. 创建`src/icons.js`文件：在项目的`src`目录下创建一个`icons.js`文件，用于自动导入Ant Design的图标。
  • 9. 配置Pina：在项目的`src`目录下创建一个`store.js`文件，用于配置Pina和导出Store实例。
  • 10. 修改`main.js`：将`main.js`中的`import '@/assets/style.css'`替换为`import 'element-plus/lib/theme-chalk/index.css'`，以引入Element UI的样式。
  • 12. 运行项目：执行以下命令启动开发服务器。
  • 14. git 地址：https://gitee.com/Beichenguren/vue3-web

    ---

    要搭建一个基于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的样式。

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

      
        Element Button
        Ant Design Button
      
    
    
    import { useStore } from './store'
    export default {
      name: 'App',
      setup() {
        const store = useStore()
        return {
          store,
        }
      },
    }
    
    
    /* Add your custom styles here */
    
    

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

    pnpm dev
    

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

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