vue+vux vux安裝出現錯誤問題及解決

Posted on by

搭建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.卸掉最新的版本，下載穩定的版本 推薦使用[email protected] [email protected]

npm uninstall less || cnpm uninstall less
npm uninstall less-loade || cnpm uninstall less-loade

安裝:

npm install [email protected] || cnpm uninstall [email protected]
npm uninstall [email protected] || cnpm uninstall [email protected]

安裝後重啟即可

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)

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：