上篇文章里面讲到如何新建一个基于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的项目的更多相关文章

  1. 一个基于Vue.js+Mongodb+Node.js的博客内容管理系统

    这个项目最初其实是fork别人的项目.当初想接触下mongodb数据库,找个例子学习下,后来改着改着就面目全非了.后台和数据库重构,前端增加了登录注册功能,仅保留了博客设置页面,但是也优化了. 一.功 ...

  2. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  3. [译]基于Vue.js的10个最佳UI框架,用于构建移动应用程序

    原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...

  4. 优秀的基于VUE移动端UI框架合集

    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...

  5. 基于 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 时代,包括其插件在需要时就引 ...

  6. vue.js相关UI组件收集

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...

  7. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  8. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  9. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

随机推荐

  1. List集合 导出 Excel

    public string CreateAdvExcel(IList<DocAdvInfo> lt) { StringBuilder builder = new StringBuilder ...

  2. 山寨小小军团开发笔记 之 GamePool

    很多时候我们对于物体(比如弓箭)大量的生成与销毁,这个时候可以把弓箭放在内存池中进行管理,加快体验.自己Copy了一个简易版的. 一.代码 GameObjectPoolManager.cs using ...

  3. C++11对象构造的改良

    [C++11对象构造的改良] C++03中一个构造函数无法构造另一个构造函数,因为A()实际上意味着生成一个临时对象,存在语音混淆.详情请看参考2. C++11中允许直接在初始化列表中调用其它的构造函 ...

  4. 对Qt for Android的评价(很全面,基本已经没有问题了,网易战网客户端就是Qt quick写的),可以重用QT积累20年的RTL是好事,QML效率是HTML5的5倍

    现在Qt不要光看跨平台了,Qt也有能力和原生应用进行较量的.可以直接去Qt官网查看他和那些厂商合作.关于和Java的比较,框架和Java进行比较似乎不且实际.如果是C++和Java比较,网上有很多文章 ...

  5. TypeMismatchException: Provided id of the wrong type for class zhongfucheng.user.entity.User.

    今天在使用SSH框架做项目的时候出现了这个错误,找了我非常非常多的时间!!!!!!! Struts Problem Report Struts has detected an unhandled ex ...

  6. ●杜教筛入门(BZOJ 3944 Sum)

    入门杜教筛啦. http://blog.csdn.net/skywalkert/article/details/50500009(好文!) 可以在$O(N^{\frac{2}{3}})或O(N^{\f ...

  7. js中如何在不影响既有事件监听的前提下新增监听器

    一. 需求澄清 比如某个按钮已经绑定了2-3个对Window对象的load事件的监听,现在需要添加一个新的对click事件的监听器,但在一定条件下才会同时触发原有的2-3个load监听器,否则只触发新 ...

  8. fastJson--json与java格式的转换

    fastJson--json与java格式的转换: /* * alibaba提供的fastJson:用法: */ @Test public void testJson() { User user = ...

  9. Roslyn如何实现简单的代码提示

    假如需要实现一个代码编辑器,其中一个很重要的功能是实现代码提示,类似VS的代码智能提示.下面用Roslyn编译器来实现一个简单的代码提示功能. 代码提示,首先必须需要知道对象的类型信息,然后通过迭代获 ...

  10. 对中文进行MD5加密的注意事项(Java版,编码问题)

    http://blog.csdn.net/tongdao/article/details/20690187 在工作中需要和第三方进行Http通信,在通信内容中有几个参数涉及到了中文.自己在进行MD5加 ...