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端口冲突

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

.