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. webpack.base.conf.js 配置如下
添加 const vuxLoader = require('vux-loader')
将原来的module.exports 改为 const webpackConfig
在 extensions 添加 '.less'
resolve: {
extensions: ['.js', '.vue', '.json','.less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
在文件最后添加
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
1.输入 npm install vux --save
2.输入 npm install vux-loader --save-dev(没安装的时候,会一直报错)
3.build/webpack.base.conf.js里参照如下代码进行配置:
var vueLoaderConfig = require('./vue-loader.conf')
const vuxLoader = require('vux-loader')
注意:将原来的module.exports的值赋值给let webpackConfig,然后再将module.exports设置下面的配置!!!
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [
{
name: 'vux-ui'
},
{
name: 'duplicate-style'
},{
name: 'less-theme',
path: 'src/common/css/theme.less'
}
]
})
然后引入theme.less文件
4、安装less-loader以正确编译less源码
npm install less less-loader --save-dev
5、安装 yaml-loader 以正确进行语言文件读取
npm install yaml-loader --save-dev
我踩的坑!!!
根据以上步骤后,启动项目cnpm run dev 以后是会报错,
坑1报 Module build failed: Error: Cannot find module 'escodegen' 错误
解决方法安装!!!
npm i --save-dev escodegen
坑2报 报 Module build failed: Error: Cannot find module 'strip-comments'
解决方法安装!!!
npm install strip-comments --save-dev
6、main.js
//引入vux提示文件
import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)