vue引入其他框架组件方法汇总
博前声明:这些方法都是基于nod.js的npm和webpack打包构建工具的前提下一、引入jQuery框架:首先在当前项目的根目录下(就是与package.json同目录),运行命令cnpm install jquery --save-dev 这样就将jquery安装到了这个项目中。然后修改webpack.base.conf.js两个地方:其一:加入var webpack = ...
博前声明:这些方法都是基于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'
更多推荐
所有评论(0)