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)

 

五：安装amfe-flexible.js

npm i -S  amfe-flexible

然后在main.js中引入：

$ import 'amfe-flexible'
$ import 'amfe-flexible/index.js'

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

然后安装postcss-pxtorem

npm install postcss-pxtorem --save-dev

然后在.postcssrc.js中添加如下代码：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 37.5, // vant官方使用的是37.5
            selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  }
}

然后重新npm run dev，打开控制台可以看到代码中的px已经被转成了rem

安装postcss-pxtorem 后，再使用px上有些不同，下面简单介绍一下。

直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个
在px后面添加/no/，不会转化px，会原样输出。 — 一般border需用这个
在px后面添加/px/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

编译后的结果为：

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

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

六：iview的安装

1，cmd进入项目根目录，然后中输入  cnpm install iview --save

2,mail.js中引入并实例化：

import iview from 'iview'

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

Vue.use(iview)

到此就可以直接用了

七：better_scroll的安装

1，cmd进入项目根目录，然后中输入  cnpm install better-scroll --save

2,需要注意的是这个不需要再main.js中进行引入配置，而是在哪个组件或页面中使用就在哪个页面引入即可

import BScroll from 'better-scroll'

八：jquery-confirm的安装

1，cmd进入项目根目录，然后中输入  cnpm install jquery-confirm --save

 

2,mail.js中引入并实例化：

import jqconfirm from 'jquery-confirm'

import 'jquery-confirm/dist/jquery-confirm.min.css'