vue2.0 + vux 项目搭建

1、快速搭建项目模板

因为项目使用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

2、运行模板文件

打开本地8080端口可以看到模板运行如下

注意：如包安装没有报错，npm run dev报错，很可能是8080端口冲突

3、安装 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: '请输入查询内容!'
});

.