vue-cli构建Vue应用的学习总结

原创 2018年04月15日 14:40:08
 “Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。”这是Vue.js的官网对Vue的简介。我在小组中负责顾客端订餐页面的设计,通过了解饿了么的移动端web实现,我决定使用Vue作为前端设计页面的框架。
 根据以往对Nodejs中Express框架和Koa框架的了解,我决定用vue-cli构建项目。

一、安装及使用vue-cli新建项目

# 全局安装vue-cli
npm install -g vue-cli
# 创建一个基于webpack模板的新项目my-project
# 在此过程中按需填写项目名,项目描述,作者,是否安装vue-router等信息
vue init webpack my-project
# 进入项目,安装依赖并运行
cd my-project
npm run dev

这里写图片描述
这里写图片描述
这里写图片描述

 访问localhost:8080可以看到如下页面,说明成功新建了一个vue项目

这里写图片描述

二、在新建项目中使用Mint UI

 前面说到vue便于与第三方库整合,于是我尝试着使用Mint UI这个来自饿了么的移动端UI库。
# 在项目中安装mint-ui
npm i mint-ui -S
 然后在项目中的文件main.js添加如下:
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)
 然后就可以在项目中使用Mint UI的组件了。比如在HelloWorld.vue中添加Mint UI的Spinner组件:

这里写图片描述

 可以看到Spinner已经显示在网页中。

这里写图片描述

三、Chromium模拟移动端显示

 谷歌浏览器可以模拟移动端显示,在调出调试窗口之后(右键-检查,或者按F12),可以看到左上角有个不明显的手机标志(下图蓝色部分),点击即可模拟移动端显示

这里写图片描述

 效果如下图,还可以调节型号和屏幕分辨率。虽然说不上完美地模拟真机,但非常方便流畅。

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38767668/article/details/79948669

Vue-cli开发多页面应用

vue-cli开发多页面应用
  • github_36673034
  • github_36673034
  • 2018-04-08 10:59:54
  • 115

使用 vue-cli 开发多页面应用的最简示例

创建项目 使用 vue-cli 创建一个项目 $ vue init webpack vue-multiple-demo 根据控制台的提示,填写相关信息即可。创建完成后,进入该项目根目录并安装...
  • xiaoyucoding
  • xiaoyucoding
  • 2018-02-26 23:33:23
  • 575

利用 vue-cli 构建一个 Vue 项目

一、项目初始构建现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli 。首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令:$ npm install...
  • JimmyLuo17
  • JimmyLuo17
  • 2017-08-13 23:05:23
  • 1020

vue-cli构建Vue应用的学习总结

 “Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现...
  • qq_38767668
  • qq_38767668
  • 2018-04-15 14:40:08
  • 43

vue-cli学习开发总结

关于select框的数据绑定 利用es6可以设置全局的data数据变量 提交表单数据到后台的方式(vue-resource/Vue.http) 这里写链接内容 这里只展示put方法提交...
  • ShaLiWa
  • ShaLiWa
  • 2016-05-12 20:01:28
  • 2480

vue-cli 快速构建vue应用,webpack打包

一、vue-clivue-cli是由vue官方发布的快速构建vue单页面的脚手架。参见vue-cli官方网站。http://vuejs-templates.github.io/webpack/之前需要...
  • caiyongshengCSDN
  • caiyongshengCSDN
  • 2018-02-13 16:12:56
  • 89

Vue-cli脚手架构建多页面项目

这是一个用Vue-cli构建的多页面项目,我们大家都熟悉vue-cli是用来快速构建单页面应用程序的脚手架,但是在我们实际的项目开发过程中多数用到的还是多页面的应用程序,在这里我通过查资料整理了一份文...
  • m0_37558869
  • m0_37558869
  • 2017-05-29 17:42:59
  • 432

vue-cli创建的项目,配置多页面的方法

vue官方提供的命令行工具vue-cli,能够快速搭建单页应用。默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂假设要新建的页面是rule,以下以rule为例创...
  • Cookysurongbin
  • Cookysurongbin
  • 2018-01-19 16:19:08
  • 488

使用vue-cli构建的项目不检查分号

使用 vue-cli 构建的项目,模版是 webpack ,默认的 eslint 配置是以 standard 为基础的,要求是不使用分号。如果我们希望要使用分号,则在 rules 字段增加配置:'se...
  • csdn_yudong
  • csdn_yudong
  • 2017-11-04 19:06:49
  • 483

vue-cli的构建+Vue的超级简单实例

☞ vue-cli的构建 ☞ 构建一个简单的Vue导航栏菜单实例
  • qq_34320300
  • qq_34320300
  • 2017-11-15 23:04:56
  • 1281
收藏助手
不良信息举报
您举报文章:vue-cli构建Vue应用的学习总结
举报原因:
原因补充:

(最多只允许输入30个字)