学习使用在windows系统上安装vue前端框架以及环境配置图文教程

news2024/9/28 1:19:10

学习使用在windows系统上安装vue前端框架以及环境配置图文教程

    • 1、安装nodejs
    • 2、安装vue
    • 3、安装Vue-cli脚手架
    • 4、安装高版本
    • 5、创建vue项目
    • 6、启动项目
    • 7、配置开发环境
    • 8、发布项目

1、安装nodejs

点我查看教程

2、安装vue

win+R,打开cmd

在这里插入图片描述

cnpm install vue -g

在这里插入图片描述
表示安装成功

3、安装Vue-cli脚手架

cnpm install -g vue-cli

在这里插入图片描述验证vue是否安装成功

vue -V

在这里插入图片描述
可以看到vue的版本号,如果需要安装3.x版本,将vue-cli改为@vue/cli即可

卸载旧版本命令

npm uninstall -g vue-cli

在这里插入图片描述

安装之前先卸载旧版本 npm uninstall -g @vue/cli
安装3.0及其以后版本 npm install -g @vue/cli@x.x.x
安装3.0以前的旧版本 npm install -g vue-cli@2.x

4、安装高版本

cnpm install -g @vue/cli

使用cnpm更快,npm太慢了
在这里插入图片描述再次执行

vue -V

在这里插入图片描述

5、创建vue项目

确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。我本地是在D盘下创建了一个vue的文件夹,
在这里插入图片描述
在命令行中运行以下命令

npm create vue@latest

或者

npm  init vue@latest

执行会看到以下内容,可以点击yes,或者no,根据自己的需求选择,不知道就回车,按默认选项安装即可
在这里插入图片描述执行

npm install
npm run format

在这里插入图片描述

6、启动项目

npm run dev

在这里插入图片描述在浏览器中访问

http://localhost:5173/

在这里插入图片描述vue项目启动成功

7、配置开发环境

推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展

在这里插入图片描述默认都是白色代码,安装插件后,不用重启vscode,可以看到代码已经有颜色了,方便查看函数和开发

在这里插入图片描述

8、发布项目

当你准备将应用发布到生产环境时,请运行:

npm run build

在这里插入图片描述

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本

在这里插入图片描述

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

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

相关文章

Golang数据流处理:掌握Reader和Writer接口的技巧

Golang数据流处理:掌握Reader和Writer接口的技巧 引言理解Reader和Writer接口Reader接口的定义和基本方法Writer接口的定义和基本方法 Reader接口的深入探讨Reader接口的实现示例使用io.Reader读取文件内容从网络连接中读取数据 常用Reader类型及其应用场景strings.…

vue之 package.json和package-lock.json

一、package.json 定义了当前项目所需要引用的各个模块,可以手工修改配置,也可以删除后,使用npm init命令重新自动生成。 但是该文件只锁定大版本号,也就是版本号的第一位,所以你会发现两个文件中同一个包的版本号不一…

【Pycharm】Pycharm创建Django提示pip版本需要升级

目录 1、现象 2、分析 3、本质 前言:经常使用pycharm创建django、flask等项目时候提示pip版本需要升级,解决方案 1、现象 使用Pycharm创建Django项目提示安装Django超时,报错建议pip升级22升级到24 2、分析 之前使用命令升级了pip到了24…

数据库连接池与Druid【后端 16】

数据库连接池与Druid 在现代软件开发中,数据库连接池作为一种关键的技术手段,被广泛用于提升数据库访问的效率和稳定性。本文将深入探讨数据库连接池的概念、常见实现,并重点介绍我国阿里集团开源的数据库连接池——Druid,以及如何…

五星级可视化页面(24):管线管路流程图可视化大屏。

本期分享管线、管路方向可视化大屏,一般用在供水、能源、交通等领域。

本地部署轻量级web开发框架Flask结合内网穿透公网环境访问管理界面

文章目录 1. 安装部署Flask2. 安装Cpolar内网穿透3. 配置Flask的web界面公网访问地址4. 公网远程访问Flask的web界面 本篇文章主要讲解如何在本地安装Flask,以及如何将其web界面发布到公网进行远程访问。 Flask是目前十分流行的web框架,采用Python编程语…

[产品管理-16]:NPDP新产品开发 - 14 - 产品创新流程 - 产品创新流程模型比较:门径、IPD、精益生产、敏捷、系统工程、设计思维、精益创业

目录 一、精益开发与敏捷开发的比较 1、核心理念 2、实践方式 3、应用场景 4、总结 二、门径流程 VS 敏捷方法 1、定义与特点 门径管理流程 敏捷方法 2、应用场景 3、比较 4、总结 三、集成产品开发 VS 系统工程 VS 设计思维 1、集成产品开发(IPD&…

LineageOS源码下载和编译(Xiaomi Mi 6X,wayne)

版权归作者所有,如有转发,请注明文章出处:https://cyrus-studio.github.io/blog/ 源码下载 LineageOS官网:https://lineageos.org/ LineageOS源码 github 地址:https://github.com/LineageOS/android LineageOS源码…

在 Java 中实现 Kafka Producer 的单例模式

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storm…

解决 Kylin OS 提示软件包 powerconnect 需要重新安装,但是我无法找到相应的安装文件

解决 Kylin OS 提示软件包 powerconnect 需要重新安装,但是我无法找到相应的安装文件 1、问题现象2、解决办法 💖The Begin💖点点关注,收藏不迷路💖 1、问题现象 sudo apt-get install -y seahorse生物识别认证 按Q或…

Android 11 FileProvider的使用和限制

概述: 从Android 7开始,将不允许在app之间,使用file uri,即file://的方式,传递一个file,否则会抛出异常:FileUriExposedException ,其解决方案,就是使用FileProvider,用c…

【Rust练习】14.流程控制

练习题来自&#xff1a;https://practice-zh.course.rs/flow-control.html 1 // 填空 fn main() {let n 5;if n < 0 {println!("{} is negative", n);} __ n > 0 {println!("{} is positive", n);} __ {println!("{} is zero", n);} } …

初识Linux · 进程(3)

目录 前言&#xff1a; 进程的创建 前言&#xff1a; 继上文介绍了着重介绍了进程的内部属性&#xff0c;以及在操作系统层面进程如何被组织起来的&#xff0c;如何调用系统接口&#xff0c;有关task_struct&#xff0c;进程的部分理解等&#xff0c;今天&#xff0c;我们就…

医疗报销|基于springBoot的医疗报销系统设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#x…

知识竞赛活动舞台搭建要多少钱

每次举办活动&#xff0c;舞台搭建总是让人头疼的一部分&#xff0c;尤其是费用问题。今天就来揭开活动舞台搭建费用的神秘面纱。 活动舞台搭建的费用主要包括舞台结构、设备、音响、灯光、舞美装饰等各方面的成本。具体来说&#xff1a; 1.舞台结构&#xff1a;包括舞台平台…

vscode 中 python 代码跳转不生效 ctrl加单击不跳转

目录 网友的解决方法&#xff1a; 我的解决方法 vscode 中 python 代码跳转不生效 ctrl加单击不跳转 网友的解决方法&#xff1a; vscode 中 python 代码跳转不生效_vscode python 代码无法跳转-CSDN博客 解决方法 后来发现vs code初次远程连接服务器时&#xff0c;需要…

带你0到1之QT编程:十一、掌握Containers容器艺术,一网打尽开发利器

此为QT编程的第十一谈&#xff01;关注我&#xff0c;带你快速学习QT编程的学习路线&#xff01; 每一篇的技术点都是很很重要&#xff01;很重要&#xff01;很重要&#xff01;但不冗余&#xff01; 我们通常采取总-分-总和生活化的讲解方式来阐述一个知识点&#xff01; …

C++类与对象(二)

目录 1.类的6个默认成员函数 2..构造函数 2.1概念 2.2 特征 3.析构函数 3.1 概念 3.2 特性 4.拷贝构造函数 4.1 概念 4.2 特征 5.赋值运算符重载函数 5.1 运算符重载&#xff08;是否重载这个运算符是看这个运算符对这个类是否有意义&#xff09; 5.2 赋值运算符重…

Vue3 + Echarts 实现中国地图

基本概念 echarts是一个基于JavaScript的开源可视化库&#xff0c;用于创建和展示各种交互式图表和图形。它可以用于数据分析、数据可视化、数据探索和数据报告等方面。我们一般使用echarts来实现数据可视化&#xff0c;本文我们使用vue3 echars来实现中国地图。 准备echarts…

Node.js 多版本安装与切换指南

一.使用nvm的方法 1. 卸载nodejs 如果你的电脑有安装nodejs&#xff0c;需要先卸载掉&#xff1b;若没有请直接下一步。 2. 前往官网下载nvm nvm&#xff1a;一个nodejs版本管理工具&#xff01; 官网地址&#xff1a;nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文…