Loading... ## 安装Nuxt <div class="tab-container post_tab box-shadow-wrap-lg"> <ul class="nav no-padder b-b scroll-hide" role="tablist"> <li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" aria-controls='tabs-469297acb38a60ff3c3a35752dec12dc680' role="tab" data-target='#tabs-469297acb38a60ff3c3a35752dec12dc680'>npm</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-3f57f5c04dc1565da672bac1361c7b5b341' role="tab" data-target='#tabs-3f57f5c04dc1565da672bac1361c7b5b341'>pnpm</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-b2a6cb8c431b3a7ce7144e4e856c984b492' role="tab" data-target='#tabs-b2a6cb8c431b3a7ce7144e4e856c984b492'>bun</a></li> </ul> <div class="tab-content no-border"> <div role="tabpanel" id='tabs-469297acb38a60ff3c3a35752dec12dc680' class="tab-pane fade active in"> ``` npx nuxi@latest init <project-name> ``` </div><div role="tabpanel" id='tabs-3f57f5c04dc1565da672bac1361c7b5b341' class="tab-pane fade "> ``` pnpm dlx nuxi@latest init <project-name> ``` </div><div role="tabpanel" id='tabs-b2a6cb8c431b3a7ce7144e4e856c984b492' class="tab-pane fade "> ``` bunx nuxi@latest init <project-name> ``` </div> </div> </div> ### 安装依赖 使用对应的包管理器进行`install`，如`npm install` ### 启动项目 启动命令为`dev` ## 安装Element-Plus <div class="tab-container post_tab box-shadow-wrap-lg"> <ul class="nav no-padder b-b scroll-hide" role="tablist"> <li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" aria-controls='tabs-5223671a144cc64e580c1b2d33fdc414240' role="tab" data-target='#tabs-5223671a144cc64e580c1b2d33fdc414240'>npm</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-5546d368bb3b3eb47ab23e51c710c81c931' role="tab" data-target='#tabs-5546d368bb3b3eb47ab23e51c710c81c931'>yarn</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-28d1e31722980dc23cfb1376f37f3e99372' role="tab" data-target='#tabs-28d1e31722980dc23cfb1376f37f3e99372'>pnpm</a></li> </ul> <div class="tab-content no-border"> <div role="tabpanel" id='tabs-5223671a144cc64e580c1b2d33fdc414240' class="tab-pane fade active in"> ``` npm install element-plus --save ``` </div><div role="tabpanel" id='tabs-5546d368bb3b3eb47ab23e51c710c81c931' class="tab-pane fade "> ``` yarn add element-plus ``` </div><div role="tabpanel" id='tabs-28d1e31722980dc23cfb1376f37f3e99372' class="tab-pane fade "> ``` pnpm install element-plus ``` </div> </div> </div> ### 将Element-Plus引入到Nuxt 在项目根目录下新建一个`plugins`文件夹，新建一个文件`element-plus.ts`，写入以下内容 ```typescript import ElementPlus from 'element-plus' import {ID_INJECTION_KEY} from 'element-plus'; export default defineNuxtPlugin(nuxtApp => { nuxtApp.vueApp.use(ElementPlus) nuxtApp.vueApp.provide(ID_INJECTION_KEY, { prefix: Math.floor(Math.random() * 10000), current: 0, }) }) ``` Nuxt会自动引入模块，不过还需要手动导入css 将以下内容添加到`nuxt.config.ts`文件中 <div class="tip inlineBlock warning simple"> 注意逗号 </div> ```ts css: [ 'element-plus/dist/index.css' ] ``` © 允许规范转载 打赏 赞赏作者 微信 赞
