（转载）vue2.0 + vux项目构建

vue2.0 + vux 项目搭建

1、快速搭建项目模板

因为项目使用vux，所以推荐使用vux官网的airyland/vux2 模板，vue-cli工具是vue项目的搭建脚手架

默认为 webpack2 模板，如果你需要使用webpack1，请使用 vue init airyland/vux2#webpack1 projectPath

1
2
3
4
5
6


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。

1

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

如果你已经用上了 yarn，建议这样

1
2


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

2、运行模板文件

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

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

（转载）vue2.0 + vux项目构建

3、安装 less

1

npm install less less-loader --save-dev

4.main.js 全局注册 toast / alert / loading

1
2
3
4
5

// 全局引入 loading/toast/alert

import { LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux'
Vue.use(LoadingPlugin)
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)

5.调用

1
2
3
4
5
6
7
8
9

// 显示等待框

this.$vux.loading.show({

  text: '加载中...'
});
 
// 隐藏等待框
setTimeout(() => {

  this.$vux.loading.hide()
}, 300);

1
2
3
4
5
6

// 提示信息

this.$vux.toast.show({

  type: 'text',

  position: 'middle',

  text: '请输入查询内容!'
});