上篇文章里面讲到如何新建一个基于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. 将SHP导入MySQL中

    ogr2ogr -f MySQL MySQL:smfs,host=127.0.0.1,user=root,password=gis D:\spatialData\HB\HuBeiPicture\HuB ...

  2. laravel强大功能路由初探(二)

    目标当然是先输出helloworld 配置hosts文件和apache下的httpd-vhosts.conf, hosts:127.0.0.1  www.blog.com httpd-vhosts.c ...

  3. 常用JS效果 需要时更新。。。

    1.手风琴效果 JS: $(function() {     var aMenuOneLi = $(".menu-one > li");     var aMenuTwo = ...

  4. 完美解决Informix的中文乱码问题

    完美解决Informix的中文乱码问题  Informix是IBM旗下的一款数据库,要不是这个项目需要,估计这辈子我都不知道居然还有这么一款数据库.想来公司的项目遍布全国各地,各种部署环境各种应用场景 ...

  5. python遗传算法实现数据拟合

    python据说功能强大,触角伸到各个领域,网上搜了一下其科学计算和工程计算能力也相当强,具备各种第三方包,除了性能软肋外,其他无可指摘,甚至可以同matlab等专业工具一较高下. 从网上找了一个使用 ...

  6. centos 安装amp 运行环境+配置虚拟地址

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  7. codeforces 629D. Babaei and Birthday Cake

    题目链接 大意就是给出一个序列, 然后让你从中找出一个严格递增的数列, 使得这一数列里的值加起来最大. 用线段树, 先将数列里的值离散,然后就是线段树单点更新, 区间查询最值. 具体看代码. #inc ...

  8. 添加zabbix自动发现(监控多tomcat实例)

    说明 何为自动发现?首先我们监控多tomcat实例,如果一个个实例地添加或许可以完成当前需求.但是日后随着实例的增多,再手动一个个去添加就十分不方便了.这时候需要自动发现这个功能,来帮助我们自动添加监 ...

  9. bzoj:1457: 棋盘游戏

    原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1457 看了网上dalao的题解,好像解释得并不是很清楚,就按照那种思路,自己YY了一个想法 ...

  10. Android 上传图片到服务器 okhttp一

    [目录] (一)上传图片到服务器一 ---------------------------------Android代码 (二)上传图片到服务器二--------------------------- ...