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

谁借莪１个温暖的怀抱￠ 2022-06-07 06:47 495阅读 0赞

博前声明：这些方法都是基于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>代码：

然后安装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'