Vue进行前端开发环境安装并且导入Jquery和Bootstrap

IDE下载

直接下载webstorm或者下载jetbrains toolbox通过注册的jetbrains的学生账号登录可以在里面选择你要下载的ide

(注册网址： https://www.jetbrains.com/student/ ，需要登录学校邮箱验证，时间需要几分钟，请耐心等)

搭建vue环境

下载对应的node.js版本，具体操作流程: vue 搭建

成功后如图

westorm搭建vue环境 ，具体操作流程:https://blog.csdn.net/weixin_40760196/article/details/79952652

小提示：如果你在按照上述流程安装webpack出现问题直接使用下面两行命令

cnpm install webpack -g
cnpm install webpack-cli -g

全部成功后如图:

webstorm新建一个vue项目 具体流程：https://blog.csdn.net/qq_37350706/article/details/86591102

新建项目过程中会出现 Use ESLint to lint your code? (Y/n) 选N 其他默认即可

vue引入bootstrap（版本选择3.37）和jquery

引入jquery

在webstorm项目终端输入以下命令

npm install jquery --save-dev 

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

在声明变量处加入webpack对象:

var webpack=require('webpack');

在module.exports里面加入：

plugins: [
  new webpack.ProvidePlugin({
    $:"jquery",
    jQuery:"jquery",
    "windows.jQuery":"jquery"
  })
]

注意上面代码块后面要加上一个逗号

修改webpack.base.conf.js文件：

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'jquery': "jquery/src/jquery"
    }

在入口文件main.js中加入

import $ from 'jquery'

引入bootstrap

npm安装bootstrap3.3.7

npm install [email protected] -save-dev 

打开你创建的项目目录，依次打开 node_modules/bootstrap/dist 把里面的css、js、fonts文件

全部拷贝复制到assets目录下,如果剪切会报错

在main.js里加入

import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'

测试上述步骤是否成功

在项目目录下src/components 新建一个hello.vue，复制以下代码

修改App.vue

然后运行项目

npm run dev

如图显示则恭喜你，导入jq、bootstrap成功（是否弹窗取决于你jq是否导入成功）

如果出现this is probably not a problem with npm. There is likely additional logging output above错误,可能需要降低一下webpack-dev-server的版本。

4.如果你按照上述步骤操作，但是还是没有显示上图，可以试试重启IDE。