当前位置: 首页 > news >正文

Vue学习之旅——开发准备

文章目录

  • 什么是Vue
  • 安装Vue工具`Vue CLI`
  • 创建一个项目
  • 运行项目
  • 安装Vue高亮插件

什么是Vue

Vue是前端优秀框架,是一套用于构建用户界面的渐进式框架。

渐进式,暂时无法理解,不过没关系,只要知道它很不错就OK啦。

安装Vue工具Vue CLI

Vue CLI是Vue.js开发的标准工具,Vue CLI是一个基于Vue.js进行快速开发的完整系统。

npm install -g @vue/cli

验证Vue是否安装成功:

vue --version

创建一个项目

运用以下命令来创建一个新项目

vue create vue-demo(注意,名字不能出现大写,可以通过-来分隔单词)

在控制台中,可以用上下按键调整选择项
在控制台中,可以用空格键选择是否选中和取消选中
Enter键是下一步

在这里插入图片描述

前两个是Vue的版本,最后一个是自定义,进入第三个后:

在这里插入图片描述

Babel //ES6转ES5
TypeScript //JS超集
Progressive Web App (PWA) Support //渐进式Web应用
Router //路由
Vuex //状态管理
CSS Pre-processors //CSS预处理
Linter / Formatter //规范类型
Unit Testing //测试
E2E Testing //测试

取消掉倒数第三个,第三个是严格检查,真的很严格。

学习阶段,我们选择BabelProgressive Web App (PWA) Support两个选项即可。

在这里插入图片描述
选择版本,3.X即可。

在这里插入图片描述
选择默认即可。In dedicated config files

在这里插入图片描述
为这次配置保存一个方便模板。

运行项目

  1. 进入项目根目录:cd vue-demo
  2. 运行npm run serve启动项目

安装Vue高亮插件

VSCode中安装vetur或者volar都可,前者针对Vue2版本,后者针对Vue3版本。

相关文章:

  • 【Unity小功能开发实战教程】重写MaskableGraphic实现UI图片圆角化功能
  • drools动态规则之Maven解析
  • 【收藏系列】多线程八股文总结
  • [Typescript]基础篇之接口
  • 现学现用的 10 个 Python 技巧
  • 3 UI开发的点点滴滴
  • 群晖docker实现IPV6访问
  • 攻防比赛中通过供应链进行渗透攻击
  • 实时即未来,车联网项目之电子围栏分析【六】
  • 前端应该掌握的浏览器调试技巧
  • Java的static关键字
  • Kafka原理介绍
  • 【Unity3D日常BUG】Unity3D中使用高亮插件Highlighting出现的错误:Parameter name:shader
  • LabVIEW编程语法学习笔记之全局变量
  • Redis高可用与持久化
  • golang 发送GET和POST示例
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • js中的正则表达式入门
  • PHP那些事儿
  • 闭包--闭包作用之保存(一)
  • 程序员最讨厌的9句话,你可有补充?
  • 大数据与云计算学习:数据分析(二)
  • 分享一份非常强势的Android面试题
  • 高程读书笔记 第六章 面向对象程序设计
  • 理解 C# 泛型接口中的协变与逆变(抗变)
  • 悄悄地说一个bug
  • 使用Swoole加速Laravel(正式环境中)
  • 学习笔记DL002:AI、机器学习、表示学习、深度学习,第一次大衰退
  • 要让cordova项目适配iphoneX + ios11.4,总共要几步?三步
  • 再次简单明了总结flex布局,一看就懂...
  • 阿里云服务器如何修改远程端口?
  • 通过调用文摘列表API获取文摘
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • ​软考-高级-系统架构设计师教程(清华第2版)【第1章-绪论-思维导图】​
  • #我与Java虚拟机的故事#连载08:书读百遍其义自见
  • (70min)字节暑假实习二面(已挂)
  • (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (删)Java线程同步实现一:synchronzied和wait()/notify()
  • (四)TensorRT | 基于 GPU 端的 Python 推理
  • *(长期更新)软考网络工程师学习笔记——Section 22 无线局域网
  • *** 2003
  • **PHP分步表单提交思路(分页表单提交)
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost
  • .Net 路由处理厉害了
  • .net知识和学习方法系列(二十一)CLR-枚举
  • [.net] 如何在mail的加入正文显示图片
  • [2008][note]腔内级联拉曼发射的,二极管泵浦多频调Q laser——
  • [20171102]视图v$session中process字段含义
  • [20171106]配置客户端连接注意.txt
  • [Android]使用Git将项目提交到GitHub
  • [CareerCup] 2.1 Remove Duplicates from Unsorted List 移除无序链表中的重复项
  • [cogs2652]秘术「天文密葬法」
  • [DNS网络] 网页无法打开、显示不全、加载卡顿缓慢 | 解决方案
  • [ffmpeg] 定制滤波器