VUX是基于 VUE的UI組件庫,那么開發項目時,如何安裝呢?

1.安裝vux

npm install vux --save

2.安裝less-loader

npm install less less-loader --save-dev

3.安裝vux-loader

npm install vux-loader --save-dev

?4.安裝成功后,在?build/webpack.base.conf.js 中進行配置

? ?4.1添加 const vuxLoader = require('vux-loader')

'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') const vuxLoader = require('vux-loader') // 注意!在這里!!!function resolve (dir) {return path.join(__dirname, '..', dir) }

?4.2 將module.exports 替換成 const webpackConfig,

? ?即將原先module.exports的值賦值給const webpackConfig

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'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},

?

4.3 在?build/webpack.base.conf.js 最后以下代碼

module.exports = vuxLoader.merge(webpackConfig, {plugins: ['vux-ui']})

4.4 更改const webpackConfig 中resolve的屬性值,其實是配置loader加載依賴，讓其支持外部的less,能夠得到解析.那么具體代碼怎么設置呢?

在原來的代碼上添加添加'.less'即可,具體代碼如下(注意是兩部分):

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'], // 注意!在這里添加less!!!alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},module: {rules: [...(config.dev.useEslint ? [createLintingRule()] : []),{test:/\.less$/, // 注意!!! 在這里添加規則!!!!!loader:'style-loader!css-loader!less-loader' },{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test'), resolve('node_modules/webpack- dev-server/client')]},{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]')}}]},

OK!大功告成!

接下來在你的模塊中添加html和script,試試效果吧!

總結

以上是生活随笔為你收集整理的如何安装vux?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。