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:
'请输入查询内容!'
});
|
.
因为项目使用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:
'请输入查询内容!'
});
|
.