上节中,我们成功的将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. 算法模板——Trie树

    实现功能——实现对于不同字符串以及之前出现过的字符串的识别,对于单个长度为L的字符串,复杂度为O(L); 代码不难懂,直接上(在识别字符串方面,个人觉得其好处远远大于hash识别——1.理论上都是O( ...

  2. 1692: [Usaco2007 Dec]队列变换(BZOJ1640强化版)

    1692: [Usaco2007 Dec]队列变换 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 682  Solved: 280[Submit][Sta ...

  3. [.net 面向对象程序设计深入](26)实战设计模式——使用Ioc模式(控制反转或依赖注入)实现松散耦合设计(1)

    [.net 面向对象程序设计深入](26)实战设计模式——使用IoC模式(控制反转或依赖注入)实现松散耦合设计(1) 1,关于IOC模式 先看一些名词含义: IOC: Inversion of con ...

  4. Octave Tutorial(《Machine Learning》)之第二课《数据移动》

    第二课 Moving Data 数据移动 常用内置函数 (1)加载文件 load 文件名.dat(或load('文件名.dat')) 接着输入文件名便可查看文件里的数据 (2)显示当前工作空间的所有变 ...

  5. 使用sudo提示用户不在sudoers文件中的解决方法

    切换到root用户 [linux@localhost ~]$ su root 密码: [root@localhost ~]# 2 查看/etc/sudoers文件权限,如果只读权限,修改为可写权限 [ ...

  6. ubuntu查看安装的cuda toolkit自带的工具及其他安装文件

    原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5253672.html 1.查看工具 默认目录为:local,进入local:cd /usr/loc ...

  7. centos6.7编译安装mysql5.7.17

    centos6.7编译安装mysql5.7.17 2017-03-24 09:57:15 提示:mysql5.7.17和之前5.56以前的版本安装不一样,需要用cmake 另外,看本文档的mysql编 ...

  8. windos环境apache+mysql+php+Discuz的安装配置

    首先是相关软件的下载:PHP.Apache和Mysql软件以及VC库.相关软件可到我的百度网盘下载,百度网盘:http://pan.baidu.com/s/1o6DYcMu 相关软件的直接下载地址: ...

  9. deepin系统如何安装deb格式的软件

    很简单,命令如下: sudo dpkg -i *.deb 记得路径要对

  10. Java排序算法之直接选择排序

    Java排序算法之直接选择排序 基本过程:假设一序列为R[0]~R[n-1],第一次用R[0]和R[1]~R[n-1]相比较,若小于R[0],则交换至R[0]位置上.第二次从R[1]~R[n-1]中选 ...