（转载）vue2.0 + vux项目构建

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