vue脚手架与创建vue项目

一、前言

        vue脚手架的安装与创建vue项目需要先行安装配置node与npm,详情可以看node、npm的下载、安装、配置_node 下载安装-CSDN博客

二、vue脚手架的使用

1、vue与vue脚手架的版本

        Vue脚手架(Vue CLI)是Vue.js官方提供的一个命令行工具,它可以帮助开发者快速搭建Vue项目结构。

        vue2与vue3是Vue的两个版本,其中的2和3是vue的大版本,对应的脚手架版本:vue2对应脚手架的Vue CLI 3 和 Vue CLI 4两个大版本,vue3对应的脚手架的Vue CLI5及以上的版本。如下文的@vue/cli 5.0.8就是vue cli的5.0版本。

2、Vue脚手架的安装

        由于前边已经下载安装并配置了node和npm,所以可以直接在CMD命令行窗口直接使用命令行安装Vue脚手架。

注:淘宝镜像的使用

淘宝镜像的使用可以大大加速通过npm指令来安装各类包的速度。

你可以通过指令npm config set registry https://registry.npmmirror.com/ 可以设置淘宝镜像。淘宝镜像到期会失效,所以每隔一段时间可能会失效。所以要不定期更换。

npm install -g @vue/cli

 安装完毕后可以使用一下指令,如果出来了@vue/cli 的版本说明vue脚手架已经安装完成。

vue -V 或 vue -version

 

 3、创建vue项目

利用vue脚手架创建vue项目有两种方法:

命令行: vue create vue-project01(vue-project01为项目名)

图形化界面 vue ui

 ①、命令行:

打开一个文件夹,鼠标右键——>在终端打开——>输入上边的命令行代码

根据需要选择直接回车(vue3)还是向下、回车(vue2)

注:较低版本的vue脚手架只有vue2,5.0版本以上的脚手架支持向下兼容vue2

等待、创建完成:

按照提示,输入命令行:

cd vue-project01  (打开创建的vue项目)
npm rund serve    (运行)

点击链接:

 ②、可视化界面

打开一个文件夹、输入命令行:vue ui

进入网页、新建项目——>输入项目名称、包管理器名称、下一步——>选择vue版本、开始创建

 等待一段时间后:项目创建完成,至于怎么打开网页可以参考上边的命令行指令,也可以用下边的vs code打开。

 三、用vs code打开项目(如果你已经下载了)

        vs code是一款免费开源的代码编译器,可以通过安装相应的扩展和配置来支持多种编程语言的代码编写、调试和运行。找到官网下载安装包即可安装,这里就不提供安装内容了。

1、打开文件

打开vs code、点击文件——>新建窗口——>转到新窗口

点击资源管理器(红圈内的)——>打开文件夹——>找到项目文件夹

 2、运行程序

点击菜单栏中的终端——>新建终端进入终端页面(一般是在界面下方)

 进入终端界面——>输入指令“npm run serve”即可运行

等待一段时间后如下——>点开链接即可在浏览器中打开网页 

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

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

相关文章

超级好用的C++实用库之套接字

💡 需要该C实用库源码的大佬们,可搜索微信公众号“希望睿智”。添加关注后,输入消息“超级好用的C实用库”,即可获得源码的下载链接。 概述 C中的Socket编程是实现网络通信的基础,允许程序通过网络与其他程序交换数据。…

【基础篇-Day8:JAVA字符串的学习】

目录 1、常用API2、String类2.1 String类的特点2.2 String类的常见构造方法2.3 String类的常见面试题:2.3.1 面试题一:2.3.2 面试题二:2.3.3 面试题三:2.3.4 面试题四: 2.4 String类字符串用于比较的方法2.5 String类字…

埃隆·马斯克的 xAI 募集 60 亿美元,瞄准 AI 超级计算机|TodayAI

埃隆马斯克(Elon Musk)创立的人工智能公司 xAI 宣布成功募集了 60 亿美元的资金,用于推动其“首批产品推向市场,建立先进的基础设施,并加速未来技术的研发”。马斯克透露,xAI 目前的估值已达到 180 亿美元&…

css 中box-shadow使用总结

还记得我之前还是 ie 时代的时候我们如果遇到有投影,阴影的设计稿,一般的做法就是使用图片作为背景实现,如果要是做自适应宽高还需要利用好几个元素拼接起来设置图片背景实现,而现在我们想要实现投影只需要一个 css 属性 box-shad…

如何简化不同网间文件摆渡的操作流程,降低IT人员工作量?

为了保护内部核心数据不被泄露,同时有效屏蔽外部网络攻击的风险,企业大多会选择实施网络隔离。将“自己人”与“外人”隔离,具有较强的安全敏感性。有些企业还会在内部网络中进一步划分,比如划分为研发网、办公网、生产网等&#…

PaliGemma – 谷歌的最新开源视觉语言模型(一)

引言 PaliGemma 是谷歌推出的一款全新视觉语言模型。该模型能够处理图像和文本输入并生成文本输出。谷歌团队发布了三种类型的模型:预训练(PT)模型、混合(Mix)模型和微调(FT)模型,每…

Vue3实战笔记(48)— reactive大揭秘:Vue 3中复杂数据结构的响应式处理

文章目录 前言reactive 的基本用法1、创建响应式对象:2、在模板中使用响应式对象:3、响应式对象的嵌套: 总结 前言 前些天了解了ref,开发时候大部分时候都是直接用ref,其实还有reactive这玩意,有时候用起来…

C语言实现正弦信号扫频

C语言实现正弦信号扫频 包含必要的头文件:首先,你需要包含 <stdio.h> 和 <math.h> 头文件,分别用于输入输出和数学函数的使用。 定义扫频参数:定义正弦扫频的参数,例如起始频率、结束频率、扫频时间等。 生成正弦波信号:使用正弦函数生成扫频信号,可以根…

【Django】从零开始学Django【2】

五. CBV视图 Django植入了视图类这一功能&#xff0c;该功能封装了视图开发常用的代码&#xff0c;无须编写大量代码即可快速完成数据视图的开发&#xff0c;这种以类的形式实现响应与请求处理称为CBV(Class Base Views)。 1. 数据显示视图 数据显示视图是将后台的数据展示…

C语言 static extern 关键字详解

1、建立2个文件&#xff1b;文件1&#xff1a;file1.c // 文件&#xff1a;counter.c#include <stdio.h>static int count 0; // 声明一个静态全局变量void increment() {count; // 对静态全局变量进行递增操作 } static int n_function() //int n_function() {printf(…

LED屏控制卡是如何控制LED屏的?

LED屏控制卡是LED显示屏的关键组件之一&#xff0c;负责将输入的画面信息转换为LED屏能够显示的数据和控制信号。以下是LED屏控制卡的工作原理和功能的详细介绍&#xff1a; 1. LED显示屏控制器概述&#xff1a; LED显示屏控制器是LED显示屏的核心部件之一&#xff0c;也称为LE…

记一次Chanakya靶机的渗透测试

Chanakya靶机渗透测试 首先通过主机发现发现到靶机的IP地址为:172.16.10.141 然后使用nmap工具对其进行扫描:nmap -sC -sV -sS -p- 172.16.10.141 发现目标靶机开启了80,22,21等多个端口&#xff0c; 访问80端口,发现是一个普通的页面,点击进入多个界面也没有其他有用的信息,然…

前端面试题12-22

12 Proxy是什么&#xff0c;有什么作用&#xff1f; Proxy 是 ES6 (ECMAScript 2015) 引入的一种元编程特性。它允许你创建一个对象&#xff0c;该对象可以拦截和定义基本操作&#xff08;例如属性查找、赋值、枚举、函数调用等&#xff09;。Proxy 提供了一种机制&#xff0c…

Openai革新AI陪伴赛道?国内的AI陪伴创业公司有哪些?

人是一切社会关系的总和&#xff0c;而人的这种社会关系又依靠着情感来联系的。但是自从陪伴式AI的出现仿佛就打破了这种传统的关系。 在你的身边有这样一个“人”&#xff0c;她善解人意、风趣幽默&#xff0c;不会发脾气还会随时陪伴着你&#xff0c;这一在科幻电影中才会出现…

Linux-----sed案例练习

1.数据准备 准备数据如下&#xff1a; [rootopenEuler ~]# cat openlab.txt My name is jock. I teach linux. I like play computer game. My qq is 24523452 My website is http://www.xianoupeng.com My website is http://www.xianoupeng.com My website is http://www.…

解决linux kernel 编译的错误问题

linux 这么大的工程&#xff0c;当你的模块和别人的模块公用一个框架比如DRM 祖爷爷级别的Makefile 给你规定了 -Werrorincompatible-pointer-types 这个时候你又不想用它怎么办呢 就是在你的代码里加上 #pragma GCC diagnostic ignored "-Wincompatible-pointer-types&…

AI作画算法原理

AI作画算法原理详解如下&#xff1a; 一、引言 AI作画是指利用人工智能算法生成图像或绘画的技术。近年来&#xff0c;随着深度学习技术的突破&#xff0c;AI作画已取得了令人瞩目的成果。这些算法能够模拟人类艺术家的创作过程&#xff0c;生成具有艺术性和创意性的图像。 …

振弦采集仪在岩土工程地质灾害监测中的可行性研究

振弦采集仪在岩土工程地质灾害监测中的可行性研究 引言&#xff1a; 岩土工程地质灾害是指在岩土体中由于自然力和人类活动等因素引起的&#xff0c;对人类生活、财产以及环境造成威胁的灾害。为了及时发现并准确监测地质灾害的发生和演化过程&#xff0c;振弦采集仪作为一种新…

计网期末复习指南:物理层(物理层的任务、香农公式、常用信道复用技术)

前言&#xff1a;本系列文章旨在通过TCP/IP协议簇自下而上的梳理大致的知识点&#xff0c;从计算机网络体系结构出发到应用层&#xff0c;每一个协议层通过一篇文章进行总结&#xff0c;本系列正在持续更新中... 计网期末复习指南&#xff08;一&#xff09;&#xff1a;计算机…

零基础想学编程,选择哪一门语言更好?(非常详细)零基础入门到精通就业,收藏这一篇就够了!

&#x1f446;点击关注 获取更多编程干货&#x1f446; 编程语言的用途广泛&#xff0c;它们各自在不同的领域和应用场景中发挥着重要作用。 零基础初学者在选择编程语言时&#xff0c;可以从就业方向入手选择。 Python 就业方向&#xff1a;数据科学、机器学习、人工智能…