VUE中引入jQuery以及bootstrap的方法步骤
博客专区 > ochmd 的博客 > 博客详情
VUE中引入jQuery以及bootstrap的方法步骤
ochmd 发表于3个月前
VUE中引入jQuery以及bootstrap的方法步骤
  • 发表于 3个月前
  • 阅读 7
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

1.引入jQuery流程

(1): 在当前项目的目录下(就是package.json),运行命令

npm install jquery --save-dev

 (2):修改webpack.base.conf.js(在build文件下)两个地方

{1}:加入

var webpack=require('webpack');

{2}在module.exports的里面加入

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
   jQuery: "jquery",
   $: "jquery"
 })
]

(3):最后在main.js中加入

import $ from 'jquery',

(4):完成jquery的引入

2.引入bootstrap流程

 在当前项目的目录下(就是package.json),运行命令

npm install bootstrap --save-dev

此处bootstrap的路径会安装在node_modules文件下,注意文件目录。

(1):修改webpack.base.conf.js

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'bootstrap':resolve('src/assets/bootstrap'),
  }
},

此部分要考虑到你项目中bootstrap的储存路径,例如在上部中‘bootstrap’的地址指向是‘src/assets/bootstrap’,所以在引入时要考虑项目中的确切路径。

(2):在main.js中import引入

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

此部分要考虑到你项目中bootstrap的储存路径,此处的路径是引用‘src/assets/bootstrap’下面的bootstrap,要考虑实际项目中的路径。

 

(3):完成bootstrap的引入

3.iview的引入流程

(1).在当前项目的目录下(就是package.json),运行命令

npm install iview --save-dev

(2):在main.js中import引入

import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iView);

(3):完成iview 的引入。

共有 人打赏支持
粉丝 0
博文 20
码字总数 14767
×
ochmd
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: