使用vue-cli构建多页面应用+vux(三)
上节中,我们成功的将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(三)的更多相关文章
- 使用vue-cli构建多页面应用+vux(一)
众所皆知,vue对于构建单页面应该相当方便,但是在项目中难免遇到有多个页面的情况. 1.先安装vue-cli脚手架,具体步骤看vue-cli的官方github地址 https://github.com ...
- 使用vue-cli构建多页面应用+vux(二)
当我们安装好vue-cli完整的项目以后,我们开始对它进行改造,此处参考了简书某个作者的,附上原文链接 http://www.jianshu.com/p/43697bdee974以及此文例子地址htt ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- 借助 Vue 来构建单页面应用
原文: https://github.com/MeCKodo/vue-tutorial 主题 Vue.js (1/2)Vue构建单页应用最佳实战 前言 我们将会选择使用一些vue周边的库 1.使用no ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- spring boot使用vue+vue-router构建单页面应用
spring boot http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/ vue https: ...
- @vue/cli 构建得项目eslint配置
如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...
- 使用Vue CLI构建Vue项目
第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...
- @vue/cli 构建得项目eslint配置2
使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...
随机推荐
- AndroidStudio运行项目出现Unsupported method: AndroidProject.getPluginGeneration()错误解决办法
一.错误描述 今天在使用AndroidStudio运行项目时出现了一个Unsupported method: AndroidProject.getPluginGeneration()错误,如下图所示: ...
- oracle expdp导出远程数据到本地
1.本地数据库新建一个用户test,并授予以下基本权限(尽量不要多授权,如本地权限大于远程,会导致导出失败,郁闷!): grant connect to test;grant resource to ...
- Spring学习笔记①
我觉得Spring之所以发展的好,主要是理论研究与实践是并轨的,能跟得上时代的步伐,尤其是基础理论的研究(可能是最近看三体看多了,对基础理论非常崇拜).微服务的实现啊,RESTful的实现,对应的Sp ...
- KoaHub平台基于Node.js开发的Koa的get/set session插件代码详情
koa-session2 Middleware for Koa2 to get/set session use with custom stores such as Redis or mongodb ...
- a中的类型转换
自动类型转换 当然自动类型转换是需要满足特定的条件的: 1. 目标类型能与源类型兼容,如 double 型兼容 int 型,但是 char 型不能兼容 int 型. 2. 目标类型大于源类型,如 ...
- JavaSE之认识java
本来很早之前就应该总结自己在JavaSE中系统学到的知识了,马上就要出去工作了,想想自己还是非常菜的菜鸟,自己就夜不能寐呀.现在从zero基础开始带大家一起回顾学习的基础知识. 现在已经是凌晨了,但是 ...
- 深入浅出数据结构C语言版(5)——链表的操作
上一次我们从什么是表一直讲到了链表该怎么实现的想法上:http://www.cnblogs.com/mm93/p/6574912.html 而这一次我们就要实现所说的承诺,即实现链表应有的操作(至于游 ...
- 写入soap消息以及与soap消息通信
1.些了解一下soap消息的结构以及通信方式如下图:
- iOS 内存泄漏
我一直以为现在都是自动内存管理了,还哪有什么内存泄漏啊.一检测才知道,不是我太相信Xcode了,就是我太单纯了.iOS开发中遇到的内存泄漏主要有几下几种: (1)对象不能释放.使用Core Fou ...
- 02.PHP7.x编译详解
#php7编译安装安装 ``` useradd -M -s /sbin/nologin www yum -y install openssl-devel bzip2-devel curl-devel ...