vue引入其他框架组件方法汇总

博前声明：这些方法都是基于nod.js的npm和webpack打包构建工具的前提下

一、引入jQuery框架：

首先在当前项目的根目录下（就是与package.json同目录），运行命令cnpm install jquery --save-dev   这样就将jquery安装到了这个项目中。

然后修改webpack.base.conf.js两个地方：

其一：加入var webpack = require("webpack")；

其二：在module.exports的里面加入

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

加到最后就好。

最后在main.js中加入import $ from 'jquery' 完成jQuery的引入。

二、引入bootstrap框架

首先在当前项目的根目录下（就是与package.json同目录），运行如下命令：

cnpm install bootstrap@3 --save

然后分别引入bootstrap框架的.css文件和.js文件

1：引入 bootstrap.css文件：

在main.js中import引入

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

2：引入bootstrap.min.js文件：

在main.js中import引入

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

三：引入iview组件库

首先在当前项目的根目录下（就是与package.json同目录），运行如下命令：

npminstall iview--save

然后在main.js中import引入

import ivewfrom 'iview';

import 'iview/dist/styles/iview.css';

Vue.use(iview);

四：引入vue-resource：

首先在当前项目的根目录下（就是与package.json同目录），运行如下命令：

cnpm install vue-resource --save

然后在main.js中import引入

import vueresource from 'vue-resource'

Vue.use(vueresource)

五：安装lib-flexible

npm install lib-flexible --save

然后在main.js中引入：import 'lib-flexible/flexible.js'

然后在项目根目录的index.html头部加入手机适配的<meta>代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

然后安装px2rem-loader    

npm install px2rem-loader

然后在build/untils.js中的loaders数组中添加如下代码：

var px2remLoader={

   loader:'px2rem-loader',

   options:{

          remUnit:75

}

}

function generateLoaders(loader,loaderOptions){

     var loaders=[cssLoader,px2remLoader]

     if(loader){

          loaders:push({

               loader:loader+'-loader',

               options:Object.assign({},loaderOptions,{

                                sourceMap:options.sourceMap

})

})

}

}

最后重启，在组件中直接写PX然后在浏览器中就会自动转换成相应的rem了