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