1. 在項(xiàng)目里安裝vux
npm install vux --save
2. 安裝vux-loader
npm install vux-loader --save-dev`
3. 安裝less-loader (這個(gè)是用以正確編譯less源碼浆劲,否則會(huì)出現(xiàn) ' Cannot GET / ')
npm install less less-loader --save-dev
4. 安裝yaml-loader (以正確進(jìn)行語(yǔ)言文件讀取, 我沒(méi)安裝似乎也沒(méi)報(bào)錯(cuò))
npm install yaml-loader --save-dev
5. webpack.base.conf.js 配置如下
添加 const vuxLoader = require('vux-loader')
將原來(lái)的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(沒(méi)安裝的時(shí)候,會(huì)一直報(bào)錯(cuò))
3.build/webpack.base.conf.js里參照如下代碼進(jìn)行配置:
var vueLoaderConfig = require('./vue-loader.conf')
const vuxLoader = require('vux-loader')
注意:將原來(lái)的module.exports的值賦值給let webpackConfig牌借,然后再將module.exports設(shè)置下面的配置!E虮ā!
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 以正確進(jìn)行語(yǔ)言文件讀取
npm install yaml-loader --save-dev
我踩的坑1热弧!周循!
根據(jù)以上步驟后,啟動(dòng)項(xiàng)目cnpm run dev 以后是會(huì)報(bào)錯(cuò)湾笛,
坑1報(bào) Module build failed: Error: Cannot find module 'escodegen' 錯(cuò)誤
解決方法安裝!:垦小!
npm i --save-dev escodegen
坑2報(bào) 報(bào) Module build failed: Error: Cannot find module 'strip-comments'
解決方法安裝!B鄯!
npm install strip-comments --save-dev
6拇囊、main.js
//引入vux提示文件
import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者