前言:省去安装项目步奏!
1.在项目里安装vux
npm install vux --save
2.安装vux-loader (不安装会报一推推的错)
npm install vux-loader --save-dev
3.安装less-loader (用以正确编译less源码,不然会报 ' Cannot GET / ')
npm install less less-loader --save-dev
4.安装yaml-loader (以正确进行语言文件读取, 我没安装似乎也没报错)
npm install yaml-loader --save-dev
5 在build/webpack.base.conf.js 文件进行配置
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig
原来的 module.exports 代码赋值给变量 webpackConfig,
6.即将原来的module.exports 改为 const webpackConfig
7.module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
8.最后一步,在resolve: {
extensions: ['.js', '.vue', '.json','.less'] 里加入“.less”。
配置代码如下:
此图出自@ Revival_Liang"$t" is not defined 报错问题,
这个问题 网上各有各的做法来解决了, 有病乱投医的心里 就试了一试 结果不理想 没解决不说 还耗费了时间,
最后我删除了 所有的依赖 以及扩展( node_modules),重新npm install ,问题就解决了。
文件过大警告
官网手册引入方式如下:
import { Toast } from 'vux'
Vue.use(Toast )
但是此引入方法打包后还是很大 有的高达2M多,排查发现,打包的是vux 里面所有组件 导致过大,因此我的做法是单个引入写全路径
import Toast from 'vux/src/components/toast'
components:{
Toast
}
网友评论