直接上步骤:
1. 使用nuxt创建项目
npx create-nuxt-app <项目名>
复制代码
2. 根据nuxt提示运行项目
cd <项目名>
npm run dev复制代码
3. 安装插件(以vant为例)
npm i vant -S // 安装vant
npm i babel-plugin-import -D // 安装babel-plugin-import,使用vant的按需加载功能
复制代码
4. 找到nuxt.config.js中的plugins选项,nuxt引入插件都是在这里引入的,它会寻找项目下的plugins文件夹下的文件
plugins: [
'~plugins/vant' // plugins下的文件路径
] 复制代码
5. 在plugins文件夹下创建文件vant.js
- 完全加载
import Vue from 'vue'
import Vant from 'vant'import 'vant/lib/index.css';
Vue.use(Vant)复制代码
- 按需加载
import Vue from 'vue'
import {Button} from 'vant'import 'vant/lib/index.css';
Vue.use(Button)复制代码
6. 随便找一个.vue文件
<template> <section class="container">
<div>
<van-button type="default">主要按钮</van-button>
<van-button type="primary">主要按钮</van-button>
</div>
</section>
</template>复制代码
7. 完成,效果如下: