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项目搭建的更多相关文章

  1. vue2.0 + vux 项目搭建

    1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...

  2. requirejs + vue 项目搭建

    以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界.所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑.当然在用的时候也有一些小坑和bug, ...

  3. Intellij IDEA Java web 项目搭建

    Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个 ...

  4. 项目搭建系列之一:使用Maven搭建SpringMVC项目

    约定电脑都安装了eclipse,且已配置好Maven以及eclipse插件. 1.Eclipse 2.maven 3.Eclipse 需要安装maven插件.url:maven - http://do ...

  5. maven项目搭建

    一.Maven简介 Maven是基于Java平台的项目构建(mvn clean install).依赖管理(中央仓库,Nexus)和项目信息管理的项目管理工具. Maven是基于项目对象模型(POM) ...

  6. maven3常用命令、java项目搭建、web项目搭建详细图解

    http://blog.csdn.net/edward0830ly/article/details/8748986 ------------------------------maven3常用命令-- ...

  7. Java web 项目搭建

    Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个 ...

  8. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  9. Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建(转)

    这篇文章主要讲解使用eclipse对Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建过程,包括里面步骤和里面的配置文件如何配置等等都会详细说明. 如果还没有搭建好环境( ...

随机推荐

  1. 加密与解密md5 3des

    /// <summary> /// MD5加密 /// </summary> /// <param name="s"></param> ...

  2. Flask--(项目准备)--框架搭建,参数配置

    项目准备: 配置参数 项目配置: 新建工程: 配置虚拟环境: 通过配置类添加配置参数: Debug配置, 初始化数据库对象, Mysql配置及数据库创建 redis配置: 端口6379和域名: 创建存 ...

  3. PAT 乙级 1065 单身狗 (25 分)

    1065 单身狗 (25 分) “单身狗”是中文对于单身人士的一种爱称.本题请你从上万人的大型派对中找出落单的客人,以便给予特殊关爱. 输入格式: 输入第一行给出一个正整数 N(≤ 50 000),是 ...

  4. Grafana+Prometheus打造springboot监控平台

    1. 环境 springboot 1.5.10.RELEASE Grafana 5.4.2 Prometheus 2.6.0 jdk 1.8 2.通过micrometer与springboot应用和p ...

  5. Js将数字转化为中文大写

    function number_chinese(str) { var num = parseFloat(str); var strOutput = "", strUnit = '仟 ...

  6. Ext.NET Grid Group分组使用

    - 需要注意的是, 涉及到分页排序, 最好定义GroupDir 方向与分组方式相同. - 譬如工资表按照最新最前分页输出. 如果分组按照默认排序的话, 最就最前. - 界面呈现出2015年, 2016 ...

  7. Python高级技巧:用一行代码减少一半内存占用

    我想与大家分享一些我和我的团队在一个项目中经历的一些问题.在这个项目中,我们必须要存储和处理一个相当大的动态列表.测试人员在测试过程中,抱怨内存不足.下面介绍一个简单的方法,通过添加一行代码来解决这个 ...

  8. eclipse的安装和汉化

    下载 打开浏览器输入网址 www.eclipse.org/ ,回车( Enter ) 点击下载( DOWNLOAD ) 会进入一个新的页面,点击下载软件包(Download Packages) 找到对 ...

  9. Dubbo基本原理机制

      分布式服务框架: –高性能和透明化的RPC远程服务调用方案 –SOA服务治理方案 -Apache MINA 框架基于Reactor模型通信框架,基于tcp长连接 Dubbo缺省协议采用单一长连接和 ...

  10. 将LinkedHashMap转换为需要的对象

    项目中,在获取json数据转换为list类型以后,本来以为可以直接使用,结果在使用中报错“java.lang.ClassCastException: java.util.LinkedHashMap c ...