vue?vux安裝出現錯誤如何解決

這篇文章主要介紹了vue vux安裝出現錯誤如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue vux安裝出現錯誤如何解決文章都會有所收獲，下面我們一起來看看吧。

搭建vux項目

介紹：VUX是基于WeUI和Vue(2.x)開發的移動端UI組件庫,基于webpack + vue-loader + vux可以快速開發移動端頁面

VUX 必須配合 vux-loader 使用

首先搭建vue項目

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.搭建項目

vue init webpack +項目名(my-project)

4.cd my-project 進入項目中

5.npm install || cnpm install 安裝依賴包

6.npm run dev || cnpm run dev 啟動項目

到這項目啟動 證明vue項目搭建成功

安裝vux

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 文件進行配置

新加內容：

const vuxLoader = require(‘vux-loader')
const webpackConfig = originalConfig

originalConfig就是原來的 module.exports出去的代碼，把它整個賦值給變量 webpackConfig

在最后加入 module.exports = vuxLoader.merge(webpackConfig, { plugins: [‘vux-ui’] }) 引用插件vux

在 resolve:{

extensions:[’.js’, ‘.vue’, ‘.json’, ‘.less’]}里加入".less"

最后啟動項目 npm run dev || cnpm run dev

啟動出現的問題：

1.報錯【Syntax Error: TypeError: this.getOptions is not a function】

可能原因：默認安裝了最新版本的less和less-loader，

解決辦法：

1.卸掉最新的版本，下載穩定的版本 推薦使用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解析出現的問題：

• 如果用的是.css 文件，執行 npm install stylus-loader css-loader style-loader --save-dev 安裝依賴就行。

• 如果用的是.less 文件，執行 npm install less less-loader --save-dev 安裝依賴就行。 vux是需要使用.less文件

• 如果用的是.sass 文件，執行 npm install sass sass-loader --save-dev 安裝依賴就行。或者（$npm intall sass-loader --save ; $npm install node-sass --save）

ps：我出現這個報錯是因為 我再出現【Syntax Error: TypeError: this.getOptions is not a function】只卸載了lass-loader 重裝，然后有了第二個報錯，然后按照解決方法后又出現 “Error evaluating function unit: the first argument to unit must be a number”的問題 很奇葩，如果有人也遇見了，請把less也卸載了 安裝穩定版本;

另外：如果安裝低版本之后還出現問題 可能是版本還不適合，你可以嘗試再下載地的版本

vux安裝中遇到的坑

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)

關于“vue vux安裝出現錯誤如何解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue vux安裝出現錯誤如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。