vue2.0 + vux 项目搭建

时间:2024-01-02 21:45:38

1、快速搭建项目模板

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

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

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。

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

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

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

2、运行模板文件

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

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

vue2.0 + vux 项目搭建

3、安装 less

npm install less less-loader --save-dev

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

// 全局引入 loading/toast/alert
import { LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux'
Vue.use(LoadingPlugin)
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)

5.调用

// 显示等待框
this.$vux.loading.show({
text: '加载中...'
}); // 隐藏等待框
setTimeout(() => {
this.$vux.loading.hide()
}, 300);
// 提示信息
this.$vux.toast.show({
type: 'text',
position: 'middle',
text: '请输入查询内容!'
});

.