上节中,我们成功的将vue-cli改造成了多入口,既然用了上简单的脚手架,那就希望用个合适的UI组件,去搜索了几个以后,最后选择了使用vux

贴上其vux的github地址  https://github.com/airyland/vux 里面还有 详细的中文文档。

这是自己完整的github地址 https://github.com/qianyinghuanmie/vue-cli-

简单的过一下安装教程。

1.安装vux

npm install vux --save-dev

2.安装vux-loader

npm install vux-loader --save-dev

3.安装less-loader以正确编译less源码

npm install less less-loader --save-dev

4.安装 yaml-loader 以正确进行语言文件读取

npm install yaml-loader --save-dev

5.修改build/webpack.base.conf.js中的代码

将原文中的

修改成如下的

6.在安装完依赖和配置后文件以后,引入vux的模板,把之前的about.vue拿来修改,全部的代码如下

<template>
<div class="about">
<a href="./index.html">从about跳转到demo1</a>
<group>
<cell title="title" value="value"></cell>
</group>
</div>
</template> <script>
import { Group, Cell } from 'vux'
export default {
components: {
Group,
Cell
}
}
</script> <style> </style>

最后在运行 npm run dev,显示出的about.vue是这样的,代表已经引入vux成功,然后尽情的去使用vux的组件快速开发吧

使用vue-cli构建多页面应用+vux(三)的更多相关文章

  1. 使用vue-cli构建多页面应用+vux(一)

    众所皆知,vue对于构建单页面应该相当方便,但是在项目中难免遇到有多个页面的情况. 1.先安装vue-cli脚手架,具体步骤看vue-cli的官方github地址 https://github.com ...

  2. 使用vue-cli构建多页面应用+vux(二)

    当我们安装好vue-cli完整的项目以后,我们开始对它进行改造,此处参考了简书某个作者的,附上原文链接 http://www.jianshu.com/p/43697bdee974以及此文例子地址htt ...

  3. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

  4. 借助 Vue 来构建单页面应用

    原文: https://github.com/MeCKodo/vue-tutorial 主题 Vue.js (1/2)Vue构建单页应用最佳实战 前言 我们将会选择使用一些vue周边的库 1.使用no ...

  5. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  6. spring boot使用vue+vue-router构建单页面应用

    spring boot http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/ vue https: ...

  7. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  8. 使用Vue CLI构建Vue项目

    第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...

  9. @vue/cli 构建得项目eslint配置2

    使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...

随机推荐

  1. 一道面试题引发的pythonic

    一道测试工程师面试题(来自搜狗): 自己写了解法: # -*- coding: utf-8 -*- import re #从整体log中过滤出有用的部分,缩小搜索范围 def filter_log(t ...

  2. ORM-Dapper学习<一>

    ORM 框架简介 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的.面向对象的开发方法是当今企业级应用开发环境中的主流开发方法,关 ...

  3. Firefox52非HTTPS页面登录页面提示连接不安全的解决办法

    背景: Firefox52版本开始,对于非HTTPS协议的登录页面,会提示链接不安全,如下图 解决办法很简单,上HTTPS协议(严重推荐,尤其是祖国这种特殊国情下,上HTTPS的协议好处多多,物超所值 ...

  4. 【Android】TextView跑马灯效果

    老规矩,先上图看效果. 说明 TextView的跑马灯效果也就是指当你只想让TextView单行显示,可是文本内容却又超过一行时,自动从左往右慢慢滑动显示的效果就叫跑马灯效果. 其实,TextView ...

  5. 页面异步发送json数据封装controller方法形参 pojo中,使用@requestBody和不使用它页面的异步方式不同之处

    方式一: 使用@requestBody 方式二 : 直接封装到pojo的方式

  6. 性能测试平台效率优化的一次经验(python版)

    在做性能测试平台的优化过程中,由于启动任务相对其他测试任务比较频繁,而目前30次两个包的交叉对比(30次)测试需要耗时30分钟整,因此打算优先对测试流程做一次优化,将测试时间消耗降低到20分钟. 由于 ...

  7. SpringMVC中@RequestBody引起的400异常处理,返回校验失败具体信息

    问题 使用@RequestBody接收一个json数据的时候,如果传入的参数不符合条件,就会直接返回400的error page. 但究竟是为什么会400并没有抛出来.这对大量参数字段的我们来说,排错 ...

  8. SqlCommandBuilder类是如何构建T-Sql语句

    本篇博客默认你看了[DataTable中AcceptChanges()方法的DataRowRowState属性]这篇博客. 在使用SqlCommandBuilder很简单,就是创建一个SqlComma ...

  9. x战警 天启高清完整版下载

    天启出生于埃及第一王朝,是地球上最古老.最强大的变种人沙巴泊,曾拥有无数信众,但后来遭人背叛,被人活埋.几千年后,强大无匹而且永生不朽的天启从数千年的深埋中获释,愤怒的他发现同类不再被视为神祇,他对人 ...

  10. Omi官方插件系列 - omi-transform介绍

    原文链接 - https://github.com/AlloyTeam/omi/tree/master/tutorial 写在前面 Omi框架正式发布了omi-transform作为Omi组件化开发特 ...