Nuxt之初体验（建立项目与引入VUE插件）

直接上步骤：

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. 完成，效果以下：