网站添加验证码,dede古典网站模板,宝塔面板配置wordpress,广州微信小程序开发制作公司vue3elementAntDesign(自动导入)pinavitejspnpm搭建项目框架 文章目录 vue3elementAntDesign(自动导入)pinavitejspnpm搭建项目框架1. 安装pnpm#xff1a;通过以下命令安装pnpm#xff0c;它是一个快速、零配置的包管理工具。2. 初始化项目#xff1a;在命令行中执行以下命…vue3elementAntDesign(自动导入)pinavitejspnpm搭建项目框架 文章目录 vue3elementAntDesign(自动导入)pinavitejspnpm搭建项目框架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 pnpm2. 初始化项目在命令行中执行以下命令使用pnpm初始化一个新项目。
pnpm init vitelatest my-project3. 安装Vue 3进入项目文件夹并安装Vue 3。
cd my-project
pnpm add vuenext4. 安装Element UI使用以下命令安装Element UI。
pnpm add element-plus5. 安装Ant Design使用以下命令安装Ant Design。
pnpm add ant-design-vuenext6. 安装Pina使用以下命令安装Pina。
pnpm add pinianext7. 配置Vite在项目根目录创建一个vite.config.js文件配置Vite的插件和别名。
import { defineConfig } from vite
import vue from vitejs/plugin-vueexport 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-vueconst 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 piniaexport const store createPinia()export function useStore() {return store
}在main.js中引入上面的store.js并使用。
import { createApp } from vue
import App from ./App.vue
import { store } from ./storeconst 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的样式。
修改App.vue修改App.vue中的模板引入Element UI和Ant Design的组件。
templatediv idappel-buttonElement Button/el-buttona-button typeprimaryAnt Design Button/a-button/div
/templatescript
import { useStore } from ./storeexport default {name: App,setup() {const store useStore()return {store,}},
}
/scriptstyle
/* Add your custom styles here */
/style12. 运行项目执行以下命令启动开发服务器。
pnpm dev这样就搭建好了一个基于Vue 3的项目框架使用了Element UI、Ant Design、Pina、Vite、JavaScript和pnpm。你可以根据需要进一步开发和配置项目。
14. git 地址https://gitee.com/Beichenguren/vue3-web
