Vux项目搭建

1、快速搭建项目模板

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

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

vue init airyland/vux2 myfirst3

? Project name y
? Project description ceshi
? Author ymn
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests No
? Setup e2e tests with Nightwatch? No

vue-cli · Generated "myfirst3".

To get started:

cd myfirst3
npm install
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

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

.