vue2.0 + vux 項目搭建

一、快速搭建項目模板

由於項目使用vux，因此推薦使用vux官網的airyland/vux2 模板，vue-cli工具是vue項目的搭建腳手架

默認爲 webpack2 模板，若是你須要使用webpack1，請使用 vue init airyland/vux2#webpack1 projectPath

npm install vue-cli -g // 若是還沒安裝
vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org
npm run dev

請特別注意，直接使用 cnpm 可能會致使依賴不正確。強烈建議給 npm 設置 taobao 的 registry。 

npm install --registry=https://registry.npm.taobao.org 

若是你已經用上了 yarn，建議這樣 

yarn config set registry https://registry.npm.taobao.org 
yarn

二、運行模板文件

打開本地8080端口能夠看到模板運行以下

注意：如包安裝沒有報錯，npm run dev報錯，極可能是8080端口衝突

三、安裝 less

npm install less less-loader --save-dev

4.main.js  全局註冊 toast  /  alert  /  loading

// 全局引入 loading/toast/alert
import { LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux'
Vue.use(LoadingPlugin)
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)

5.調用

// 顯示等待框
this.$vux.loading.show({
  text: '加載中...'
});

// 隱藏等待框
setTimeout(() => {
  this.$vux.loading.hide()
}, 300);

 

// 提示信息
this.$vux.toast.show({
  type: 'text',
  position: 'middle',
  text: '請輸入查詢內容!'
});

.