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