新建一个基于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 ...
随机推荐
- Redis为什么这么快
Redis为什么这么快 1.完全基于内存,绝大部分请求是纯粹的内存操作,非常快速.数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1): 2.数据结构简单, ...
- 10个顶级的CSS3代码生成器
新出来的在线工具和web应用允许开发人员快速创建网站,而无需手动一行一行地编写代码.当前,不断有新的框架和代码库涌现在前端开发这个领域里. 但是,这也让许多开发人员忘记了代码生成器以及它们在构建网站时 ...
- 使用代码编辑器Sublime Text 3进行前端开发及相关快捷键
推荐理由: Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相比于浮肿沉重的Eclipse, ...
- HashSet LinkedHashSet TreeSet 分析
1.HashSet分析 hashset 底层是hash表,就是hashMap,是无序的,唯一的.也就是说,它的底层其实就是一个HashMap key 值的组成值.所以具有唯一性. public Ha ...
- uva1228 Integer Transmission
这道题思维很灵活.也有点套路的意思. 首先规定0,1分别按照原来的顺序接收,只是01换位.这样简化了思维.(否则并不会有更优结果它.,比较好想)最大值和最小值可以贪心得到.那么接下来就是给定一个整数P ...
- 深入了解JVM(Java虚拟机)
虚拟机 JRE由Java API和JVM组成,JVM通过类加载器(Class Loader)加类Java应用,并通过Java API进行执行. 虚拟机(VM: Virtual Machine)是通过软 ...
- CNN完成mnist数据集手写数字识别
# coding: utf-8 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data d ...
- 服务器禁用ping
linux禁ping.这里操作的是centos6.5内核参数禁ping禁用ping #echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all启用ping ...
- 一个电脑安装两个jdk版本
场景:先前使用了1.6的jdk但是现在学java需要使用jdk1.8的,现在打算电脑上使用两个jdk 1 . 准备两个版本的jdk我的两个jdk路径为: D:\jdk1.7.0_80 D:\Progr ...
- 洛谷 P1085 不高兴的津津
这道题就是经典的条件分支的题https://www.luogu.org/problemnew/show/P1085 code: #include <stdio.h> int main() ...