vue入门简单实例

最新推荐文章于 2024-05-05 17:54:12 发布
最新推荐文章于 2024-05-05 17:54:12 发布
阅读量145 收藏
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44635443/article/details/103034255
版权

所使用的工具：谷歌浏览器、Node.js(自带npm) idea

使用node.js安装cli服务

Cmd 输入 npm install -g @vue/cli
在这里插入图片描述

创建一个项目

Vue create 项目名称

在这里插入图片描述

为项目安装ui支持（如iview）

Vue add iview（过程y或回车）
在这里插入图片描述

增加router支持

vue add router
（从创建项目开始可在idea的Terminal中运行）
在这里插入图片描述

开启项目的服务。

输入 npm run serve 然后回车。

测试

项目创建成功，此时浏览器输入localhost:8080将出现页面。 可在官网找个布局来测试效果，将其复制到HelloWord.vue 页面

将app.vue页面调整如下 主页面就变为所用的布局（修改完成记得保存）
在这里插入图片描述

峰过林
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue简单入门及案例
qq_54605990的博客
04-27 1786
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
vue入门vue入门vue入门
05-14
"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来构建用户界面。它的设计目标是使开发过程更加直观和可维护，使得开发者可以专注于应用的业务逻辑...
Vue 入门简单示例
Elvira_Sunset的博客
06-11 1001
#Vue ##1、创建Vue实例展示在页面上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} </div> <script src="https://cd
Vue入门示例，样例
zjl523357813的专栏
02-24 400
介绍几个入门示例，通过不同的实现方式从而体会一下 Vue
初学者Vue超简单入门小例子
10-23 1933
Vue小实例 这是转载一个大大的，跟着敲了以后顿觉清明，于是记录下来 这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Proj
Vue3 简介及入门实例
村雨遥
06-05 1713
Vue 3 入门笔记
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue学习-Vue入门
weixin_59357453的博客
04-02 4280
这是一篇vue学习记录
Vue开发简单入门
weixin_41247583的博客
05-05 1089
工具链支持： Vue 与现代前端工具链兼容，支持如 Webpack 和 Babel 等工具，以及像 Vuex（状态管理）、Vue Router（路由管理）和 Vue CLI（项目脚手架工具）等官方支持的库和插件。Vue.js 是由前 Google 工程师尤雨溪（Evan You）在 2014 年创建的，其设计的初衷是通过尽可能简单的 API 提供数据响应性和组件化的视图层解决方案。通过以上步骤，你可以搭建一个 Vue.js 开发环境，并开始开发和部署你的第一个 Vue 应用。
Vue 简单快速入门
woruosuifenglang的博客
07-25 2284
​Vue
vue入门小例子
07-08
在“vue入门小例子”这个项目中，我们可以看到作者通过实践Vue.js的基本特性来学习和理解这个框架。这里我们将深入探讨Vue.js的核心概念和在`TestVUE.html`和`vue.js`这两个文件中可能涉及的知识点。 首先，Vue.js...
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
vue入门实例 js html css vue模板
08-19
这个"vue入门实例 js html css vue模板"压缩包很可能是为了帮助初学者快速理解如何将Vue与HTML、CSS和JavaScript结合使用，创建一个基本的Web应用。 Vue的核心特性包括组件化、响应式数据绑定、指令系统以及生命...
基于springcloud微服务开发平台
07-22
采用前后端分离的模式，前端开源两个框架：Sword (基于 React、Ant Design)、Saber (基于 Vue、Element-UI) 后端采用SpringCloud全家桶，并同时对其基础组件做了高度的封装，单独开源出一个框架：BladeTool BladeTool已推送至Maven中央库，直接引入即可，减少了工程的臃肿，也可更注重于业务开发 集成Sentinel从流量控制、熔断降级、系统负载等多个维度保护服务的稳定性。 注册中心、配置中心选型Nacos，为工程瘦身的同时加强各模块之间的联动。 极简封装了多租户底层，用更少的代码换来拓展性更强的SaaS多租户系统。 借鉴OAuth2，自研多终端认证系统，可控制子系统的token权限互相隔离。 借鉴Security，自研Secure模块，采用JWT做Token认证，可拓展集成Redis等细颗粒度控制方案。 稳定生产了六年，经历了从 Camden -> Hoxton -> 2023 的技术架构，也经历了从fat jar -> docker -> k8s + jenkins的部署架构。 项目分包明确，规范微服务的开发模式，使包与包
毕业设计javajsp诗歌诗词网站sqlserver-qr源码含文档工具包
07-22
毕业设计javajsp诗歌诗词网站sqlserver-qr源码含文档工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 诗韵人间网站 系统管理 修改密码 年代管理 年代录入 诗词管理 诗词录入 诗词搜索 留言板 包含：源码、数据库脚本、论文、答辩ppt、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码）
07-22
【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正
凯度：2022凯度银行保险行业品牌建设报告：以差异化博弈变局，洞察银行保险业的品牌增长之道(1).pdf
07-22
凯度：2022凯度银行保险行业品牌建设报告：以差异化博弈变局，洞察银行保险业的品牌增长之道(1).pdf
国潮风（11）---喜爱PPT.pptx
最新发布
07-22
【ppt素材】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值