如何在Vue项目中安装和使用VUX组件？

vux2 模板 fork 自 webpack 模板&＃xff0c;基本和官方同步。

1、默认为 webpack2 模板

npm install vue-cli -g // 如果还没安装

vue init airyland/vux2 projectPath // 创建名为 my-project 的模板

cd projectPath // 进入项目

npm install -g cnpm --registry&＃61;https://registry.npm.taobao.org
cnpm install // 开始安装

npm run dev 或者 yarn dev // 运行项目

2、安装 vux,vux-loader

npm install vux --save
npm install vux-loader --save-dev

3、安装less-loader &＃xff08;这个是用以正确编译less源码&＃xff0c;否则会出现 ’ Cannot GET / &＃39;&＃xff09;

npm install less less-loader --save-dev

4、安装yaml-loader (以正确进行语言文件读取, 我没安装似乎也没报错)

npm install yaml-loader --save-dev

5、vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置&＃xff1a;

const vuxLoader &＃61; require(&＃39;vux-loader&＃39;)
const webpackConfig &＃61; originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfigmodule.exports &＃61; vuxLoader.merge(webpackConfig, {plugins: [&＃39;vux-ui&＃39;]
})


6、resolve加上.less

7、在build/webpack.base.conf.js全部文件如下

&＃39;use strict&＃39;
const path &＃61; require(&＃39;path&＃39;)
const utils &＃61; require(&＃39;./utils&＃39;)
const config &＃61; require(&＃39;../config&＃39;)
const vueLoaderConfig &＃61; require(&＃39;./vue-loader.conf&＃39;)function resolve (dir) {return path.join(__dirname, &＃39;..&＃39;, dir)
}const createLintingRule &＃61; () &＃61;> ({// test: /\.(js|vue)$/,// loader: &＃39;eslint-loader&＃39;,// enforce: &＃39;pre&＃39;,// include: [resolve(&＃39;src&＃39;), resolve(&＃39;test&＃39;)],// options: {// formatter: require(&＃39;eslint-friendly-formatter&＃39;),// emitWarning: !config.dev.showEslintErrorsInOverlay// }
})const webpackConfig &＃61; {context: path.resolve(__dirname, &＃39;../&＃39;),entry: {app: &＃39;./src/main.js&＃39;},output: {path: config.build.assetsRoot,filename: &＃39;[name].js&＃39;,publicPath: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39;? config.build.assetsPublicPath: config.dev.assetsPublicPath},resolve: {extensions: [&＃39;.js&＃39;, &＃39;.vue&＃39;, &＃39;.json&＃39;,&＃39;.less&＃39;],alias: {&＃39;vue$&＃39;: &＃39;vue/dist/vue.esm.js&＃39;,&＃39;&＃64;&＃39;: resolve(&＃39;src&＃39;),}},module: {rules: [...(config.dev.useEslint ? [createLintingRule()] : []),{test: /\.vue$/,loader: &＃39;vue-loader&＃39;,options: vueLoaderConfig},{test: /\.js$/,loader: &＃39;babel-loader&＃39;,include: [resolve(&＃39;src&＃39;), resolve(&＃39;test&＃39;), resolve(&＃39;node_modules/webpack-dev-server/client&＃39;)]},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: &＃39;url-loader&＃39;,options: {limit: 10000,name: utils.assetsPath(&＃39;img/[name].[hash:7].[ext]&＃39;)}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: &＃39;url-loader&＃39;,options: {limit: 10000,name: utils.assetsPath(&＃39;media/[name].[hash:7].[ext]&＃39;)}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: &＃39;url-loader&＃39;,options: {limit: 10000,name: utils.assetsPath(&＃39;fonts/[name].[hash:7].[ext]&＃39;)}},{test: /\.less$/,loader:"style-loader!css-loader!less-loader",}]},node: {// prevent webpack from injecting useless setImmediate polyfill because Vue// source contains it (although only uses it if it&＃39;s native).setImmediate: false,// prevent webpack from injecting mocks to Node native modules// that does not make sense for the clientdgram: &＃39;empty&＃39;,fs: &＃39;empty&＃39;,net: &＃39;empty&＃39;,tls: &＃39;empty&＃39;,child_process: &＃39;empty&＃39;}}
module.exports &＃61; vuxLoader.merge(webpackConfig, {plugins: [&＃39;vux-ui&＃39;]
})