vue+vux 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)

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。