vue框架(三)_vue引入jquery、bootstrap

一、vue安装jquery

1、按照之前博客的内容，新建一个vue工程。

2、在项目文件夹下，使用命令npm install jquery --save-dev 引入jquery。

3、在build/webpack.base.conf.js中添加如下内容：

var webpack = require('webpack')

和

plugins: [

  new webpack.ProvidePlugin({

    $: "jquery",

    jQuery: "jquery"

  })

],

添加完成后，文件内容如下：

'use strict'

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

var webpack = require("webpack")

function resolve (dir) {

  return path.join(__dirname, '..', dir)

}

module.exports = {

  context: path.resolve(__dirname, '../'),

  entry: {

    app: './src/main.js'

  },

  output: {

    path: config.build.assetsRoot,

    filename: '[name].js',

    publicPath: process.env.NODE_ENV === 'production'

      ? config.build.assetsPublicPath

      : config.dev.assetsPublicPath

  },

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

    }

  },

  module: {

    rules: [

      {

        test: /\.vue$/,

        loader: 'vue-loader',

        options: vueLoaderConfig

      },

      {

        test: /\.js$/,

        loader: 'babel-loader',

        include: [resolve('src'), resolve('test')]

      },

      {

        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 10000,

          name: utils.assetsPath('img/[name].[hash:7].[ext]')

        }

      },

      {

        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 10000,

          name: utils.assetsPath('media/[name].[hash:7].[ext]')

        }

      },

      {

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 10000,

          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

        }

      }

    ]

  },

  // 增加一个plugins

  plugins: [

    new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery"

    })

  ],

}

webpack.base.conf.js

在src/main.js文件中 引入jquery

1、import $ from 'jquery'

2、 修改HelloWorld.vue。添加jquery代码

<template>

  <div class="hello"> 

    <h1>{{ msg }}</h1> 

    <h2>Essential Links</h2> 

    <ul> 

      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> 

      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> 

      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li> 

      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> 

      <br> 

      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li> 

    </ul> 

    <h2>Ecosystem</h2> 

    <ul> 

      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 

      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 

      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 

      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 

    </ul> 

    <div class="btn-group" role="group" aria-label="..."> 

      <button type="button" class="btn btn-default">Left</button> 

      <button type="button" class="btn btn-default">Middle</button> 

      <button type="button" class="btn btn-default">Right</button> 

    </div> 

    <div id="cc">cc</div> 

  </div> 

</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>

启动项目：npm run dev，能够在界面上看到，弹出alert，就证明jquery引入成功了。

二、vue安装Bootstrap

1、安装bootstrap，使用命令npm install bootstrap --save-dev

2、在package.json文件中引入bootstrap这个模块

3、在src/main.js文件中 引入jquery

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

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