基于 Nuxt + Vant 的自营电商项目(一)

第一篇 搭建项目

1. 初始化 Nuxt

Github/

$ npx create-nuxt-app <项目名>

2. 引入 Vant

安装 vant less less-loader

<项目名>/

$ npm i -S vant 
$ npm i -D less less-loader

在 nuxt.config.js 文件里注册插件：

nuxt.config.js

build: {
  transpile: [/vant.*?less/],
  babel: {
    plugins: [
      [
        'import',
        {
          libraryName: 'vant',
          style: (name) => {
            return `${name}/style/less.js`
          }
        },
        'vant'
      ]
    ]
  }
}

3. 使用 Vant

• 全局引用
• 局部引用

在 plugins 目录添加 vant.js 文件，全局引用 Vant 组件：

plugin/vant.js

import Vue from 'vue'
import Vant from 'vant';
import 'vant/lib/vant-css/index.css'

Vue.use(Vant)

在 页面 或者 模版 中局部引用 Vant 组建

pages/index.vue

import { Button } from 'vant'