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，复制以下代码

<template>
  <nav class="navbar navbar-default navbar-fixed-top">
    <a href="#" class="navbar-brand"><strong>BUCT</strong></a>
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Rating</a></li>
      <li><a href="/contests">Contests</a></li>
      <li><a href="/edit_request">edit request</a></li>
    </ul>
  </nav>
</template>

<script>
  $(function () {
    alert(123);
  });
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

修改App.vue

<template>
  <div id="app">
    <hello></hello>
    <!--<img src="./assets/logo.png">-->

  </div>
</template>

<script>
  import hello from './components/hello'
  export default {
    name: 'App',
    components: {hello}
  }
</script>

然后运行项目

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。