使用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还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...
随机推荐
- Java面试01|JVM相关
1.JVM内存查看与分析,编写内存泄露实例 堆区.栈区.方法区.本机内存都有可能内存溢出.在这里编写堆区内存溢出实例.如下(来自<深入理解Java虚拟机>一书. // -Xms20m -X ...
- x01.Weiqi.13: 鼎力推荐
鼎力推荐 : 点击后即可观看,小伙子讲的很有深度. 说到深度,自然离不了深度学习.AlphaGo 的横空出世,似乎很有学习的必要. MuGo: 点击下载后,发现是 python,自然免不了一番学习,好 ...
- 简单聊聊TestNG中的并发
前言 最近在做项目里的自动化测试工作,使用的是TestNG测试框架,主要涉及的测试类型有接口测试以及基于业务实际场景的场景化测试.由于涉及的场景大多都是大数据的作业开发及执行(如MapReduce.S ...
- Kubernetes 1.5安装
Kubernetes从1.3开始引入kubeadm来试图简化其复杂的安装.但kubeadm至今仍不稳定,而且我个人觉得kubeadm反而麻烦,还不如直接用脚本或者其他自动化工具来安装来的利索.关于ku ...
- Android: Toolbar、AppBarLayout
ToolBar是google退出的一个应用程序动作条 包括: 设置导航栏图标 设置应用程序Logo 设置标题 设置子标题 添加各种自定义控件 添加动作条菜单 API:https://developer ...
- SPM HW1 A project
项目分析 --民航航班异常轨迹可视分析 最近完成的一个项目是一个可视化大作业--民航航班异常轨迹可视分析.要求利用已给的8G飞机的飞行记录数据,将飞机的飞行轨迹在浏览器中进行飞行轨迹高维可视化以及对异 ...
- laravel 简单的上传图片
/** * laravel 简单的上传图片* @param Request $request* @return View*/public function upload(Request $reque ...
- 文件IO理解
一次读取写入单个字节 public class CopyFileDemo { public static void main(String[] args) throws IOException { F ...
- 小梦windows phone 8.1开发:语音朗读
使用SpeechSynthesizer类可以实现文本朗读功能,位于 Windows.Media.SpeechSynthesis命名空间.有了它我们就可以实现有声小说了,是不是很爽.下面给出一个将文本块 ...
- javascript . 04 匿名函数、递归、回调函数、对象、基于对象的javascript、状态和行为、New、This、构造函数/自定义对象、属性绑定、进制转换
匿名函数: 没有名字的函数,函数整体加小括号不报错, 函数调用 : a:直接调用 (function (){函数体}) ( ) ; b:事件绑定 document.onlick = functio ...