您好,登錄后才能下訂單哦!
做移動端項目的話vue現(xiàn)在是首要的選擇,足夠輕便,文檔足夠全,當(dāng)然用的人多,項目中遇到的坑別人可能也遇到過,解決起來也比較方便,至于在開發(fā)中做需要的移動端組件庫,個人比較推崇vux。
其實項目里組件庫可以結(jié)合起來使用,因為不管是vux,Mint-ui,Muse-ui等等各有各有的優(yōu)勢,今天就只分享下vue項目中如何配置vux。
1.項目里安裝vux
npm install vux --save
2.安裝vux-loader(vux2必須結(jié)合vux-loader使用,本文也只是介紹vux2的配置)
npm install vux-loader --save-dev
3.安裝less-loader
npm install less less-loader --save-dev
安裝完成記得在webpack.base.conf.js里做如下配置,在extensions里加入less
resolve: { extensions: ['.js', '.vue', '.json', 'less'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }
4.安裝yaml-loader
npm install yaml-loader --save-dev
最后一步在build/webpack.base.conf.js文件里將原來的module.exports的代碼賦值給一個新的變量webpackConfig,整個文件如下:
'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vuxLoader = require('vux-loader') const vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } const webpackConfig = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json', 'less'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } } module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
我們不需要在main.js里引入,而是在我們需要用到組件庫的組件里面通過
import { XHeader, Tabbar } from 'vux' export default { components: { XHeader, Tabbar // 需要什么import引入然后加入組件的components里就好了 } }
唯一要吐糟的就是下拉框真的太丑了…
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。