使用自己搭建的vue项目，使用vant时，虽然引入这个插件，但是没有任何效果，请问如何解决

Question

webpack.base.js 文件

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const devMode = process.env.NODE_ENV !== 'production';
// console.log( 'devMode === ', devMode );

function resolve (dir) {
    let newPath = path.join(__dirname, '..', dir);
    // console.log("newPath == ", newPath);
    return newPath;
}

let baseConfig = {
    resolve: {
        // 定义别名
        alias: {
            '@': resolve('src'),
            'vue$': 'vue/dist/vue.esm.js',
        },
        // 告诉webpack解析模块时应该搜索哪些目录
        modules: [path.resolve( __dirname, 'src' ), 'node_modules'],
        extensions: ['.js', '.vue', '.json', '.less', '.scss']
    },
    entry: {
        // index: path.resolve( __dirname, 'src/pages/home/main.js' ),
        index: './src/pages/home/main.js'

    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // sass文件的处理
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.vue$/,
                exclude:/node_modules/,
                loader: 'vue-loader', /* 原来的'vue'改成'vue-loader' */
                options: {
                    // vue-loa4der options go here
                    loaders:{
                        css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',
                        scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader'
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test:/\.(png|svg|jpg|gif|ico|woff|eot|ttf)$/,
                exclude: /(public)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 500,   //小于50K的 都打包

                            name:'[hash:8].[name].[ext]',
                            // publicPath:"img/",  //替换CSS引用的图片路径 可以替换成爱拍云上的路径
                            // outputPath:"../img/"        //生成之后存放的路径
                        }
                    }
                ]
            }
        ]
    }
};

exports.baseConfig = baseConfig;

webpack.dev.js 文件

const path = require('path');
const merge = require('webpack-merge');
const base = require('./webpack.base.js');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = merge( base.baseConfig, {
  output: {
    filename: '[name].bundle.js',
    path: __dirname + 'service/dist', //打包路径
    publicPath:'dist/', // 用于处理静态资源引用地址问题
  },
  devtool: 'source-map',
  devServer: {
    host: '127.0.0.1',
    compress: false,
    port: 6600,
    contentBase: './server',
    hot: true
  },
  plugins: [
    new CleanWebpackPlugin(),
    // new HtmlWebpackPlugin({
    //   title: 'Output Management'
    // }),
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
});

main.js 文件

// import Vue from 'vue/dist/vue.common.js';
import Vue from 'vue';
import router from './router.js';
import App from './modules/App'
Vue.config.productionTip = false;
//引入矢量图
// import "./assets/iconfont/iconfont.css"
//引入Vant插件

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant);

// let data = {
//     Root: Root
// };


new Vue({
    el: "#app",
    router,
    components: { App },
    template: '<App/>',
    beforeCreate: () =>{
        // console.group('beforeCreate 创建前状态=============== ');
        // console.log("%c%s", "color:red" , "el     : ");
    },
    created: function () {
        // console.group('created 创建完毕状态===============》');
    },
    beforeMount: function () {
        // console.group('beforeMount 挂载前状态===============》');
    },
    mounted: function () {
        // console.group('mounted 挂载结束状态===============》');
    },
    beforeUpdate: function () {
        // console.group('beforeUpdate 更新前状态===============》');
    },
    updated: function () {
        // console.group('updated 更新完成状态===============》');
    },
    beforeDestroy: function () {
        // console.group('beforeDestroy 销毁前状态===============》');
    },
    destroyed: function () {
        // console.group('destroyed 销毁完成状态===============》');
    }
});

Answer 1

mainjs中需要用到的组件也需要use