上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目)。

该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接使用比较热门的一个基于 Vue.js 的移动端组件库,那就是MintUI。

使用 vue-cli

首先需要使用vue-cli,因为上一篇文章里已经说过如何安装,这里就不细说,跟之前一样。cmd里输入命令行。

  1. npm install -g vue-cli
    vue init webpack projectname

npm run dev之前需要安装一下mintUI

  1. npm i mint-ui -S
  2. # for Vue 1.x
  3. npm i mint-ui@1 -S

然后npm run dev

启动完毕,直接访问http://localhost:8080

引入 Mint UI

你可以因为整个MintUI,或者是根据需要仅引入部分组件。

完整引入

在main.js中写入下面内容

  1. import Vue from 'vue'
  2. import MintUI from 'mint-ui'
  3. import 'mint-ui/lib/style.css'
  4. import App from './App'
  5. import router from './router'
  6.  
  7. Vue.config.productionTip = false
  8.  
  9. Vue.use(MintUI)
  10.  
  11. /* eslint-disable no-new */
  12. new Vue({
  13. el: '#app',
  14. router,
  15. components: { App },
  16. template: '<App/>'
  17. })

这时候就完成了Mint UI的引入。需要注意的是,样式文件需要单独引入。()

按需引入

借助 babel-plugin-component ,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装babel-plugin-component :

先ctrl+c暂停服务及热更新。输入以下命令:

  1. npm install babel-plugin-component -D

这时候本人的cmd中报了一个错,

  1. Error: Couldn't find preset "es2015" relative to directory

是因为目录里没有找到预设的ES2015

这时候需要安装一下

  1. 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的前端UI组件库的比对和选型

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...

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

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

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

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

  9. 使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app

    近几年,混合模式移动应用的概念甚嚣尘上,受到了一些中小型企业的青睐,究其原因,混合模式开发可以比传统移动开发节约大量的开发成本和人力成本. Hybrid App(混合模式移动应用)是指介于web-ap ...

随机推荐

  1. Redis为什么这么快

    Redis为什么这么快 1.完全基于内存,绝大部分请求是纯粹的内存操作,非常快速.数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1): 2.数据结构简单, ...

  2. 10个顶级的CSS3代码生成器

    新出来的在线工具和web应用允许开发人员快速创建网站,而无需手动一行一行地编写代码.当前,不断有新的框架和代码库涌现在前端开发这个领域里. 但是,这也让许多开发人员忘记了代码生成器以及它们在构建网站时 ...

  3. 使用代码编辑器Sublime Text 3进行前端开发及相关快捷键

    推荐理由: Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相比于浮肿沉重的Eclipse, ...

  4. HashSet LinkedHashSet TreeSet 分析

    1.HashSet分析 hashset 底层是hash表,就是hashMap,是无序的,唯一的.也就是说,它的底层其实就是一个HashMap  key 值的组成值.所以具有唯一性. public Ha ...

  5. uva1228 Integer Transmission

    这道题思维很灵活.也有点套路的意思. 首先规定0,1分别按照原来的顺序接收,只是01换位.这样简化了思维.(否则并不会有更优结果它.,比较好想)最大值和最小值可以贪心得到.那么接下来就是给定一个整数P ...

  6. 深入了解JVM(Java虚拟机)

    虚拟机 JRE由Java API和JVM组成,JVM通过类加载器(Class Loader)加类Java应用,并通过Java API进行执行. 虚拟机(VM: Virtual Machine)是通过软 ...

  7. CNN完成mnist数据集手写数字识别

    # coding: utf-8 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data d ...

  8. 服务器禁用ping

    linux禁ping.这里操作的是centos6.5内核参数禁ping禁用ping #echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all启用ping ...

  9. 一个电脑安装两个jdk版本

    场景:先前使用了1.6的jdk但是现在学java需要使用jdk1.8的,现在打算电脑上使用两个jdk 1 . 准备两个版本的jdk我的两个jdk路径为: D:\jdk1.7.0_80 D:\Progr ...

  10. 洛谷 P1085 不高兴的津津

    这道题就是经典的条件分支的题https://www.luogu.org/problemnew/show/P1085 code: #include <stdio.h> int main() ...