前端开发部署:Visual Studio Code + vue

news2024/11/8 18:45:08

〇 说明

本教程全部采用默认安装路径,因为在进行自定义路径安装的时候,需要配置各种环境变量,在这个配置过程中,可能出现各种很混乱的问题。

一 安装Node.js

1 下载https://nodejs.org/en

在这里插入图片描述

2 按照默认NEXT执行

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

==C:\Program Files\nodejs==

在这里插入图片描述
在这里插入图片描述
这里不勾选,后续需要什么tools的时候,再进行安装即可。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3 安装完成后校验

Win + R 打开 CMD
在这里插入图片描述
在这里插入图片描述
输入版本查看命令,查看安装是否成功

node -v
npm -v

在这里插入图片描述

二 安装vue

1 首先定义镜像路径

npm config set registry https://registry.npmmirror.com

2 输入下面指令查看路径

npm config get

在这里插入图片描述

3 安装vue相关工具

3.1 安装webpack

webpack用来项目构建、打包、资源整合等。

npm install webpack -g

在这里插入图片描述

3.2 安装vue-cli脚手架构建工具

注意这里安装新的脚手架。

npm install -g  @vue/cli

出现warn没关系,继续执行即可。
在这里插入图片描述
查看vue版本及是否成功:

vue -V

在这里插入图片描述

三 上述命令集

node -v
npm -v
npm config set registry https://registry.npmmirror.com
npm config get

npm install webpack -g
npm install -g  @vue/cli
vue -V

四 基于上述vue创建项目

1 新建一个存放项目的路径,如在D盘新建web-system文件夹,然后将路径设置到该文件夹。
在这里插入图片描述
2 新建项目 vue create vue-demo,这里选择第三个Manually select features自定义选项操作并回车(至于第一个和第二个选项可以快速搭建带eslint和babel的项目)。

vue create vue-demo

在这里插入图片描述
在这里插入图片描述
3 选择配置项,这里选择了Babel、Router、Vuex、Linter/Formatter三个选项,然后回车。

在这里插入图片描述
(4)选择vue版本,这里选择vue2,然后回车。
在这里插入图片描述

(5)选择router的模式
vue-router分为两种模式hash、history;
这里选择history模式,所以输入Y,然后回车(如果使用hash,则输入n)。
在这里插入图片描述
(6)代码语法错误检查,这里选择ESLint + Standard config,这个是标准的,然后回车。

在这里插入图片描述
(7)选择检查代码语法的时机,这里选择第一个Lint on save(保存时检查),然后回车。
在这里插入图片描述
(8)第三方配置文件存在的方式,这里选择第一个In dedicated config files,然后回车。

在这里插入图片描述

(9)是否保存本次配置为预设项目模板,这里选择N(也可以选择Y,这样下次可以直接使用该配置方案快速搭建项目),然后回车,等待项目搭建成功。
在这里插入图片描述
(10)项目搭建完成。
在这里插入图片描述
在这里插入图片描述

(11)按照提示,运行项目:

cd vue-demo
npm run serve

在这里插入图片描述

(12)在地址栏输入http://10.93.226.107:8080/或者http://localhost:8080/,可以直接打开VUE起始页。

  - Local:   http://localhost:8080/
  - Network: http://10.93.226.107:8080/

在这里插入图片描述

在这里插入图片描述

五 安装VS Code

1 下载https://code.visualstudio.com/

在这里插入图片描述

2 安装VS Code

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3打开已新建的项目

(1)“文件”—“打开文件夹”—找到D:\web-system\vue-demo,直接选择该文件夹,项目同时包含在其中。

在这里插入图片描述
信任项目

(2)在VScode终端运行项目。

  • ① 打开终端
    在这里插入图片描述

  • ② 输入:npm run serve
    在这里插入图片描述
    在这里插入图片描述

  • ③如果不行的话,记得用系统管理员权限操作。
    在这里插入图片描述
    在这里插入图片描述
    (3)在地址栏输入http://10.93.226.107:8081/或者Ctrl+单击地址,可以直接打开VUE起始页。

在这里插入图片描述

4 结束运行项目

在控制台界面,按Ctrl+C
在这里插入图片描述

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

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

相关文章

flutter日历范围选择器

1.传入日期跨度,选择上架日期时,自动显示下架日期 2.手动选择上架日期和下架日期(图中下架日期自动填了只需CalendarDateRangePicker在initState方法中使用_startDate widget.initialStartDate; _endDate widget.initialEndDate;,而不直接…

史上最详细四叉树地图不同技术应用和代码详解

四叉树地图在计算机和机器人领域应用的很广,但是初学者可能会发现四叉树地图有各种不同的实现方式,很多在机器人领域不适用或是在计算机存储领域不适用。今天我就讲解下各类四叉树的实现方式和应用场景。 史上最详细四叉树地图不同技术应用和代码详解 本…

出现 Navicat 和 Cmd 下SQL 版本 | 查询不一致的解决方法

目录 1. 问题所示1.1 查询表格不一致1.2 版本不一致2. 原理分析3. 解决方法1. 问题所示 命令行和数据库使用工具出现不一致的情况,分别有如下情况 1.1 查询表格不一致 使用工具查询当地表格: 使用命令行查询当地表格: 1.2 版本不一致 在cmd命令下mysql --version 查询…

Vue3全局封装dialog弹框

Vue3全局封装modal弹框使用: 应用场景:全局动态form表单弹框 应用Vue3碎片: ref,reactive,app.component,defineExpose,defineProps,defineEmits 应用UI: element-plus dialog form …

【设计模式】结构型设计模式之 适配器模式

介绍 适配器模式(Adapter Pattern) 是一种结构型设计模式,它的核心目的是使接口不兼容的类能够协同工作。适配器模式通过将一个类的接口转换为客户希望的另一个接口,来解决两个已有接口之间不匹配的问题,从而增加它们…

【Vue】声明式导航-自定义类名(了解)

问题 router-link的两个高亮类名 太长了,我们希望能定制怎么办 解决方案 我们可以在创建路由对象时,额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass const router new VueRouter({routes: [...],linkActiveClass: "类名1&quo…

微信小程序毕业设计-网吧在线选座系统项目开发实战(附源码+论文)

大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:微信小程序毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计…

Hadoop 2.0:主流开源云架构(一)

目录 一、引例(一)问题概述(二)常规解决方案(三)分布式下的解决方案(四)小结 自从云计算的概念被提出,不断地有IT厂商推出自己的云计算平台,但它们都是商业性…

LeetCode | 997.找到小镇的法官

这道题拿到后很明显是一个图论的简单出度入度问题,法官的标志就是图中出度为0,入度为n-1的结点,而且根据题目条件,满足这一条件的结点有且只有一个 但是我不知道力扣中关于图论的邻接表和邻接矩阵这些数据结构是需要自己写还是已经…

shell编程(三)—— 控制语句

程序的运行除了顺序运行外,还可以通过控制语句来改变执行顺序。本文介绍bash的控制语句用法。 一、条件语句 Bash 中的条件语句让我们可以决定一个操作是否被执行。结果取决于一个包在[[ ]]里的表达式。 bash中的检测命令由[[]]包起来,用于检测一个条…

论文中eps格式图片制作

在提交论文终稿时,有时需要提交论文中图片的eps格式,这里记录一下eps格式图片制作的过程,方便以后查阅。 论文中eps格式图片制作 PPT绘制的图片转换为eps格式使用代码生成的图片Latex中显示的图片大小跟Ai中设定画板的大小不一致 PPT绘制的图…

品牌策划:不只是工作,是一场创意与学习的旅程

你是否认为只有那些经验丰富、手握无数成功案例的高手才能在品牌策划界崭露头角? 今天,我要悄悄告诉你一个行业内的秘密:在品牌策划的世界里,经验虽重要,但绝非唯一。 1️、无止境的学习欲望 品牌策划,这…

智能投顾:重塑金融理财市场,引领行业新潮流

一、引言 在数字化浪潮的推动下,金融行业正经历着前所未有的变革。其中,智能投顾作为金融科技的重要分支,以其高效、便捷和个性化的服务,逐渐成为金融理财市场的新宠。本文旨在探讨智能投顾如何引领金融理财新潮流,通过丰富的案例及解决方案,展示其独特的魅力和价值。 二…

Clearedge3d EdgeWise 5.8 强大的自动化建模软件

EdgeWise是功能强大的建模软件,提供领先的建模功能和先进的技术,让您的整个过程更快更准确!您可以获得使用自动特征提取和对象识别的 3D 建模,ClearEdge3D 自动建模和对象识别软件通过创建竣工文档和施工验证完成该过程。拓普康和…

Go singlefight 源码详解|图解

写在前面 通俗的来说就是 singleflight 将相同的并发请求合并成一个请求,进而减少对下层服务的压力,通常用于解决缓存击穿的问题。 详解 基础结构 golang.org/x/sync/singleflight singleflight结构体: type call struct {wg sync.WaitGro…

永磁同步电机双矢量模型预测转矩控制MPTC

导读:本期文章主要介绍永磁同步电机双矢量模型预测转矩控制。由于传统直接转矩控制和单矢量的模型预测转矩控制转矩纹波较大,且在全速范围内的开关频率不固定,针对这一缺陷,引入双矢量MPTC。 如果需要文章中的仿真模型&#xff0…

AI生成个性化壁纸

使用天工AI 将图片设置成桌面壁纸

transformer 位置编码源码解读

import torch import mathdef get_positional_encoding(max_len, d_model):"""计算位置编码参数:max_len -- 序列的最大长度d_model -- 位置编码的维度返回:一个形状为 (max_len, d_model) 的位置编码张量"""positional_e…

IDEA启动项目报java.lang.OutOfMemoryError: GC overhead limit exceeded

idea编译项目时报j ava.lang.OutOfMemoryError: GC overhead limit exceeded错误,教你两步搞定! 第一步:打开help -> Edit Custom VM Options ,修改xms和xmx的大小,如下图: 第二步:File -> Settings…

素数的无穷大的证明

素数的无穷大——欧几里得的证明 文章目录 一、说明二、欧几里得证据三、哥德巴赫对素数无穷性的证明(1730)四、Frstenberg 对素数无穷性的证明(1955)五、库默尔对欧几里得证明的重述 一、说明 众所周知,素数是无限多的。然而,两…