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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38767668/article/details/79948669
 “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),可以看到左上角有个不明显的手机标志(下图蓝色部分),点击即可模拟移动端显示

这里写图片描述

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

这里写图片描述

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页