vue-cli 引入jq bootstrap

vue-cli脚手架快速构建项目

-------默认了有已经安装了node-------

生成项目步骤:

一: npm install vue -g          //安装vue

二: npm install vue-cli -g     //安装vue-cli

三: vue init webpack demo  //创建项目(demo)   生成项目名为demo的的项目模板

引入插件jq bootstrap

一:引入jq:
输入 npm install jquery --save-dev      用npm下载jq依赖、

 找到build文件夹下的webpack.base.conf.js文件打开,修改配置:   

1、加入webpack对象:
let webpack=require('webpack');

 2、在module.exports里面加入:
plugins: [
  new webpack.ProvidePlugin({
    $:"jquery",
    jQuery:"jquery",
    "windows.jQuery":"jquery"
  })
]

3、在入口文件main.js中加入

import $ from 'jquery'      //全局引入jq


二.引入bootstrap:

1.输入 npm install bootstrap --save-dev      用npm下载bootstrap依赖

2、修改webpack.base.conf.js文件:

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'jquery': "jquery/src/jquery"
    }
3.在入口文件main.js中加入:

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'


原文:https://blog.csdn.net/tanhao_282700/article/details/68955607 

猜你喜欢

转载自blog.csdn.net/qq_41063734/article/details/84563772