Vue怎么安装?看这一篇就够了!

news2024/9/17 9:07:47

Vue2.0 安装

一般我们都不会单独用 npm 去安装 Vue 插件,而是通过脚手架 Vue CLI 去初始化一个 Vue 项目。

Vue CLI 安装

::: warning 注意
使用默认的镜像源安装 npm 第三方包可能要很长时间,建议你已经替换了新的镜像源。如需要请查看 npm 镜像源修改
:::

Vue CLI 官网:https://cli.vuejs.org/zh

通过 npm 全局安装 vue cli 脚手架 npm install -g @vue/cli

在这里插入图片描述

目前安装的版本是 5.0.8

Vue CLI 初始化项目

  1. 新建一个空文件夹,用来存放项目文件。

  1. 通过 vue create hello-world 命令初始化一个 Vue 项目。之后会出现一些选项。

  2. 选择 Default ([Vue 2] babel, eslint) 代表默认安装 Vue2.0 并且集成了 babel 和 eslint 插件。

启动项目

  1. 通过 cd hello-world 命令进入项目根目录,或者直接把 hello-world 文件夹拖到新的 VS Code 窗口中。

  2. 通过 npm run serve 或者 yarn serve 运行项目。


  1. 在浏览器中输入 http://localhost:8080/ 或者在终端中按住 Ctrl + 鼠标左键点击它即可预览页面。

目录结构分析

  • node_modules(项目依赖包文件)
  • dist(项目打包文件)
  • public(公共静态资源)
    • favicon.ico(网页图标)
    • index.html(静态页面)
  • src(编译文件)
    • assets(静态资源)
    • components(全局组件)
    • App.vue(根组件)
    • main.js(打包入口)
  • .gitignore(git 过滤配置)
  • babel.config.js(ECMAScript 解析文件)
  • package.json(依赖包/插件/项目信息记录)
  • README.md(介绍文档)
  • vue.config.js(运行/打包配置文件)

安装 Vue 相关插件

Vuter

后续在访问 .vue 文件时,代码可能会黑白色的,没有语法高亮,需要安装一下 Vueter 插件 。请参考 Vuter 插件

Prettier - Code formatter

代码格式化工具,使得代码更加简洁易读。请参考 Prettier - Code formatter 插件

原文链接:菜园前端

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/948797.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

不用订阅,不用破解,永久免费使用Axure最新版教程

首先去官网下载最新的axure,你没听错,就是最新的。 下载网址:Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool 下载完后解压安装到本地,并注册属于你自己的账户,开始试用。可惜的是只有30天的试…

零基础如何备考通过PMP?

​01为什么要去考?新手能考吗? 首先PO一个官方解释: PMP——项目管理专业人士资格认证,由项目管理协会(Project Management Institute)发起,在全球206多个国家和地区得到高度认可。 通俗点说就…

如何自己实现一个丝滑的流程图绘制工具(七)bpmn-js 批量删除、复制节点

背景 希望实现批量删除和复制节点,因为bpmn-js是canvas画的,所以不能像平时页面上的复制一样直接选择范围,会变成移动画布。 思路是: 绘制一个选择的效果框,这样才可以看出来选的节点有哪些。 上面的选中范围框效果…

CSS 实现平面圆点绕椭圆动画

前言 👏CSS实现平面圆点绕椭圆动画,速速来Get吧~ 🥇文末分享源代码。记得点赞关注收藏! 1.实现效果 2.实现原理 transform-style:CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面&#xf…

Python GUI应用程序开发之wxPython使用详解

概要 wxPython是一个强大的跨平台GUI工具包,它使用Python编程语言开发,提供了丰富的控件功能。如果你是一名Python开发者,而且希望创建一个功能齐全的桌面应用程序,那么wxPython是一个值得考虑的选择。 什么是wxPython wxPython…

【论文阅读】你看不见我:对基于激光雷达的自动驾驶汽车驾驶框架的物理移除攻击

文章目录 AbstractIntroduction Abstract 自动驾驶汽车(AVs)越来越多地使用基于激光雷达的物体检测系统来感知道路上的其他车辆和行人。目前,针对基于激光雷达的自动驾驶架构的攻击主要集中在降低自动驾驶物体检测模型的置信度,以诱导障碍物误检测&…

宏观经济和风电预测误差分析(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

【LeetCode-中等题】199. 二叉树的右视图

文章目录 题目方法一&#xff1a;层序遍历取每一层最后一个元素方法二&#xff1a;深度优先搜索 题目 方法一&#xff1a;层序遍历取每一层最后一个元素 // 方法一 &#xff1a;层序 集合(取每层子集合最后一个元素)// List<List<Integer>> Rlist new ArrayList…

运动耳机哪款最好、热门运动耳机推荐

对于当代年轻人而言&#xff0c;运动健身已成为最流行的压力释放方式。然而&#xff0c;我们不得不承认&#xff0c;运动本身确实是一项沉闷而艰苦的挑战&#xff0c;需要我们付出大量汗水和持之以恒的坚持。 在运动过程中&#xff0c;许多人会借助音乐的律动来激励自己不断向前…

「2024」预备研究生mem-数学进阶卷(二)8.27 比较易错的难题,存在特殊方法

一共12道题&#xff1a; 回忆&#xff1a; 不错&#xff1a; 男生 没有要求顺序 &#xff0c;就不用A55了

得帆CTO徐翔轩:AIGC X 低代码,解锁无限可能

AIGC与低代码 在Open AI的ChatGPT的带动下&#xff0c;2023年已经成为公认的AI之年&#xff0c;Chat-GPT、Notion AI、Copilot等杀手级AI应用更是让大家认知到了AIGC的能力与潜力。AIGC在创新、效率等方面带来的颠覆性&#xff0c;让越来越多的数字化从业者感受到冲击与期待&a…

Android OTA 相关工具(六) 使用 lpmake 打包生成 super.img

我在 《Android 动态分区详解(二) 核心模块和相关工具介绍》 介绍过 lpmake 工具&#xff0c;这款工具用于将多个分区镜像打包生成一个 Android 专用的动态分区镜像&#xff0c;一般称为 super.img。Android 编译时&#xff0c;系统会自动调用 lpmake 并传入相关参数来生成 sup…

傅里叶变换(FFT)笔记存档

参考博客&#xff1a;https://www.luogu.com.cn/blog/command-block/fft-xue-xi-bi-ji 目录&#xff1a; FFT引入复数相关知识单位根及其相关性质DFT过程&#xff08;难点&#xff09;DFT结论&#xff08;重要&#xff09;IDFT结论&#xff08;重要&#xff09;IDFT结论证明&…

c++ lambda

Lambda Lambda 表达式一般用于定义匿名函数&#xff0c;使得代码更加灵活简洁&#xff0c;优点&#xff1a; 声明式编程风格&#xff1a;就地匿名定义目标函数或函数对象&#xff0c;不需要额外写一个命名函数或者函数对象。以更直接的方式去写程序&#xff0c;好的可读性和可…

cinder的配额参数说明

概述 openstack默认为了防止用户随意使用存储空间&#xff0c;针对cinder做了限制。cinder的quota有一个专门的驱动去完成。当超过quota时&#xff0c;使用cinder将会失败。 cinder中quota的默认配置 quota_drivercinder.quota.DbQuotaDriver quota的驱动&#xf…

C#获取屏幕缩放比例

现在1920x1080以上分辨率的高分屏电脑渐渐普及了。我们会在Windows的显示设置里看到缩放比例的设置。在Windows桌面客户端的开发中&#xff0c;有时会想要精确计算窗口的面积或位置。然而在默认情况下&#xff0c;无论WinForms的Screen.Bounds.Width属性还是WPF中SystemParamet…

【git】合并分支代码失败fix conficts and then commit the result

目录 一、合并代码 二、打开冲突文件 三、手动处理冲突文件 四、将修改文件添加提交 前言&#xff1a;合并分支代码到主干报错fix conficts and then commit the result 一、合并代码 切换到要合并到的分支&#xff0c;例如主干 git merge 被合并分支的文件名 如果没有冲…

Redis.conf 配置文件详解

1、units 单位 配置大小单位&#xff0c;开头定义了一些基本的度量单位&#xff0c;只支持 bytes&#xff0c;不支持bit&#xff0c;并且对大小写 不敏感。 2、INCLUDES 包含 类似于 Spring 配置文件&#xff0c;可以通过 includes 包含&#xff0c;redis.conf 可以作为总文件…

机器学习:争取被遗忘的权利

随着越来越多的人意识到他们通过他们经常访问的无数应用程序和网站共享了多少个人信息&#xff0c;数据保护和隐私一直在不断讨论。看到您与朋友谈论的产品或您在 Google 上搜索的音乐会迅速作为广告出现在您的社交媒体提要中&#xff0c;这不再那么令人惊讶。这让很多人感到担…