新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目（详细文章请戳用Vue创建一个新的项目）。
该项目如果需要组件等都需要自己去写，今天就学习一下如何新建一个基于vue.js+Mint UI的项目，直接使用比较热门的一个基于 Vue.js 的移动端组件库，那就是MintUI。
使用 vue-cli
首先需要使用vue-cli，因为上一篇文章里已经说过如何安装，这里就不细说，跟之前一样。cmd里输入命令行。
npm install -g vue-cli
vue init webpack projectname
npm run dev之前需要安装一下mintUI
npm i mint-ui -S
# for Vue 1.x
npm i mint-ui@1 -S
然后npm run dev
启动完毕，直接访问http://localhost:8080
引入 Mint UI
你可以因为整个MintUI,或者是根据需要仅引入部分组件。
完整引入
在main.js中写入下面内容
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App'
import router from './router' Vue.config.productionTip = false Vue.use(MintUI) /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
这时候就完成了Mint UI的引入。需要注意的是，样式文件需要单独引入。（）
按需引入
借助 babel-plugin-component ,我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装babel-plugin-component :
先ctrl+c暂停服务及热更新。输入以下命令：
npm install babel-plugin-component -D
这时候本人的cmd中报了一个错，
Error: Couldn't find preset "es2015" relative to directory
是因为目录里没有找到预设的ES2015
这时候需要安装一下
npm install --save-dev babel-preset-es2015
安装完毕，再一次npm run dev
新建一个基于vue.js+Mint UI的项目的更多相关文章
- 一个基于Vue.js+Mongodb+Node.js的博客内容管理系统
这个项目最初其实是fork别人的项目.当初想接触下mongodb数据库,找个例子学习下,后来改着改着就面目全非了.后台和数据库重构,前端增加了登录注册功能,仅保留了博客设置页面,但是也优化了. 一.功 ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- [译]基于Vue.js的10个最佳UI框架，用于构建移动应用程序
原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...
- 优秀的基于VUE移动端UI框架合集
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- 基于Vue的前端UI组件库的比对和选型
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
- 使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...
- 使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app
近几年,混合模式移动应用的概念甚嚣尘上,受到了一些中小型企业的青睐,究其原因,混合模式开发可以比传统移动开发节约大量的开发成本和人力成本. Hybrid App(混合模式移动应用)是指介于web-ap ...
随机推荐
- iOS 音频视频制作
--iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...
- IOS问题
#import "EXFifthViewController.h" @interface EXFifthViewController () @end @implementation ...
- life of a NPTL pthread
这是2013年写的一篇旧文,放在gegahost.net上面 http://raison.gegahost.net/?p=91 March 7, 2013 life of a NPTL pthread ...
- 四次元新浪微博客户端Android源码
四次元新浪微博客户端Android源码 源码下载:http://code.662p.com/list/11_1.html [/td][td] [/td][td] [/td][td] 详细说明:http ...
- x86和i386
x86: 1 9 7 8年6月,I n t e l公司推出了8 0 8 6,一个1 6位微处理器,它可访问的存储空间达到1 M B. Intel x86家族继续发展,1 9 8 5年出现了3 2位的3 ...
- SQLite运算符
SQLite运算符 SQLite的运算符是什么? 运算符是一个保留字或一个字符主要用于SQLite语句的WHERE子句来执行操作,如比较和算术运算. 操作符用于指定条件的SQLite语句和作为连词在一 ...
- JavaScript Html2canvas 生成高清图片（移动端模糊问题）
最近在做一个移动端的项目,简单记录一下该功能. 需求是这样的: 将带有二维码和一些介绍信息 动态生成一张图片 比如说是 生成这样的图片,文字.主图.价格.二维码都是不固定的. 对于这个需求,看见微信上 ...
- 汇编3栈帧，参数传递，串操作，混合汇编，x64，asm文件
基础知识2 选择结构 通过判断 + 条件跳转指令来实现 循环结构 通过判断 + 条件跳转指令来实现(会有一个向上跳转的语句) 函数调用约定 C调用约定: 由外部平衡栈 标准调用约定 : 由函数内部平衡 ...
- Python3简明教程（六）—— 数据结构
简单的来说,数据结构(data structure)是计算机中存储.组织数据的方式.比如我们之前使用过的列表就是一种数据结构,在这里我们还会深入学习它.之前也有简单的介绍. 列表 >>&g ...
- DROP USER - 删除一个数据库用户帐号
SYNOPSIS DROP USER name DESCRIPTION 描述 DROP USER 从数据库中删除指定的用户. 它不删除数据库里此用户所有的表,视图或其他对象. 如果该用户拥有任何数据库 ...