您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue vux安裝出現(xiàn)錯(cuò)誤如何解決的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇vue vux安裝出現(xiàn)錯(cuò)誤如何解決文章都會(huì)有所收獲,下面我們一起來看看吧。
介紹:VUX是基于WeUI和Vue(2.x)開發(fā)的移動(dòng)端UI組件庫,基于webpack + vue-loader + vux可以快速開發(fā)移動(dòng)端頁面
VUX 必須配合 vux-loader 使用
1.安裝vue
npm install vue --save
可以安裝淘寶鏡像
npm install --registry=https://registry.npm.taobao.org
2.安裝三腳架vue-cli
npm install vue-cli -g || cnpm install vue-cli -g
3.搭建項(xiàng)目
vue init webpack +項(xiàng)目名(my-project)
4.cd my-project 進(jìn)入項(xiàng)目中
5.npm install || cnpm install 安裝依賴包
6.npm run dev || cnpm run dev 啟動(dòng)項(xiàng)目
到這項(xiàng)目啟動(dòng) 證明vue項(xiàng)目搭建成功
1.npm install vux --save || cnpm install vux --save
2. 安裝vux-loader
npm install vux-loader --save-dev || cnpm install vux-loader --save-dev
3.安裝less-loader
npm install less less-loader --save-dev || cnpm install less less-loader --save-dev
4.在build文件夾下webpack.base.conf.js 文件進(jìn)行配置
新加內(nèi)容:
const vuxLoader = require(‘vux-loader') const webpackConfig = originalConfig
originalConfig就是原來的 module.exports出去的代碼,把它整個(gè)賦值給變量 webpackConfig
在最后加入 module.exports = vuxLoader.merge(webpackConfig, { plugins: [‘vux-ui’] }) 引用插件vux
在 resolve:{
extensions:[’.js’, ‘.vue’, ‘.json’, ‘.less’]}里加入".less"
啟動(dòng)出現(xiàn)的問題:
1.報(bào)錯(cuò)【Syntax Error: TypeError: this.getOptions is not a function】
可能原因:默認(rèn)安裝了最新版本的less和less-loader,
解決辦法:
1.卸掉最新的版本,下載穩(wěn)定的版本 推薦使用less@3.9.0 less-loader@4.1.10
npm uninstall less || cnpm uninstall less npm uninstall less-loade || cnpm uninstall less-loade
安裝:
npm install less@3.9.0 || cnpm uninstall less@3.9.0 npm uninstall less-loader@4.1.10 || cnpm uninstall less-loader@4.1.10
安裝后重啟即可
2.vue 解決*!!vue-style-loader!css-loader?{“sourceMap”:true}或_modules/vux/src/components/alert/index.vue…問題
可能是css解析出現(xiàn)的問題:
如果用的是.css 文件,執(zhí)行 npm install stylus-loader css-loader style-loader --save-dev 安裝依賴就行。
如果用的是.less 文件,執(zhí)行 npm install less less-loader --save-dev 安裝依賴就行。 vux是需要使用.less文件
如果用的是.sass 文件,執(zhí)行 npm install sass sass-loader --save-dev 安裝依賴就行?;蛘撸?npm intall sass-loader --save ; $npm install node-sass --save)
ps:我出現(xiàn)這個(gè)報(bào)錯(cuò)是因?yàn)?我再出現(xiàn)【Syntax Error: TypeError: this.getOptions is not a function】只卸載了lass-loader 重裝,然后有了第二個(gè)報(bào)錯(cuò),然后按照解決方法后又出現(xiàn) “Error evaluating function unit: the first argument to unit must be a number”的問題 很奇葩,如果有人也遇見了,請把less也卸載了 安裝穩(wěn)定版本;
另外:如果安裝低版本之后還出現(xiàn)問題 可能是版本還不適合,你可以嘗試再下載地的版本
1.輸入 npm install vux --save
2.輸入 npm install vux-loader --save-dev(沒安裝的時(shí)候,會(huì)一直報(bào)錯(cuò))
3.build/webpack.base.conf.js里參照如下代碼進(jìn)行配置:
var vueLoaderConfig = require('./vue-loader.conf') const vuxLoader = require('vux-loader')
注意:將原來的module.exports的值賦值給let webpackConfig,然后再將module.exports設(shè)置下面的配置?。?!
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)行語言文件讀取
npm install yaml-loader --save-dev
我踩的坑?。。?/p>
根據(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'
解決方法安裝?。?!
npm install strip-comments --save-dev
6、main.js
//引入vux提示文件 import { AlertPlugin, ToastPlugin } from 'vux' Vue.use(AlertPlugin) Vue.use(ToastPlugin)
關(guān)于“vue vux安裝出現(xiàn)錯(cuò)誤如何解決”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“vue vux安裝出現(xiàn)錯(cuò)誤如何解決”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。