搭建vux項目

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

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

新加內(nèi)容：

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

啟動出現(xiàn)的問題：

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

可能原因：默認安裝了最新版本的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)這個報錯是因為 我再出現(xiàn)【Syntax Error: TypeError: this.getOptions is not a function】只卸載了lass-loader 重裝，然后有了第二個報錯，然后按照解決方法后又出現(xiàn) “Error evaluating function unit: the first argument to unit must be a number”的問題 很奇葩，如果有人也遇見了，請把less也卸載了 安裝穩(wěn)定版本;

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

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設(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 以正確進行語言文件讀取

npm install yaml-loader --save-dev

我踩的坑?。?！

根據(jù)以上步驟后，啟動項目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' 

解決方法安裝?。。?/p>

npm ?install strip-comments --save-dev

6、main.js

//引入vux提示文件
import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論