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

〇 说明

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

一 安装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
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++ BFS相关题目

目录 图像渲染 岛屿数量 图像渲染 733. 图像渲染 vis就是标记1有没有被用过 符合条件的都放到队列里,每次出队列一个,判四个, 如果要改的值与当前的值相同直接返回 注意:image[x][y] prev要放在坐标判断的后面&#xff…

深度解析地铁票务系统的技术架构与创新应用

在城市交通体系中,地铁作为一种快速、便捷的公共交通方式,已经成为现代都市生活的重要组成部分。而地铁票务系统的技术架构,则是支撑地铁运营的核心之一。本文将深度解析地铁票务系统的技术架构与创新应用,从系统设计、数据管理、…

PE文件(七)扩大节合并节数据目录

添加shellcode有以下几种的方式: 1.直接在任意节的空白区添加代码 2.新增节添加代码 3.扩大最后一个节添加代码 4.合并节并添加代码 今天我们学习如何扩大节,合并节 扩大节 在上一节的学习中,我们可以通过上移NT头和节表覆盖DOS Stub以…

前端技术回顾系列 08|TS 泛型基础

在微信中阅读,关注公众号:CodeFit。 创作不易,如果你觉得这篇文章对你有帮助,请不要忘了 点赞、分享 和 关注 我的公众号:CodeFit,为我的持续创作提供一些动力。 上篇内容回顾:枚举(Enums) 在上篇文章中,我们详细回顾了 TypeScript 中的 枚举(Enums)。 枚举 是一…

spark第三篇sql

spark第三篇sql sparksql概述sparksql四大特性dataframe概述通过读取数据源创建dataFrameDataFrame常用操作DataSet将RDD转换为DataFrame代码开发sparksql 操作hivesqlsparksql读取mysql表中的数据sparksql将结果数据写入到mysql中 sparksql概述 1、sparksql发展史 shark为spa…

HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有5个页面。 二、作品演示 三、代…

MQ解决的问题

系统中MQ能解决哪些问题? 1.不同语言的程序使用MQ通信 2.分布式,微服务,之间的通信,实现服务质检解耦 3.高并发实现销峰作用 4.实现异步,提高用户体验。

“程序员职业素养全解析:技能、态度与价值观的融合“

文章目录 每日一句正能量前言专业精神专业精神的重要性技术执着追求的故事结论 沟通能力沟通能力的重要性团队合作意识实际工作中的沟通案例结论 持续学习持续学习的重要性学习方法进步经验结论 后记 每日一句正能量 梦不是为想象,而是让我们继续前往。 前言 在数字…

Python数据分析与机器学习在电子商务推荐系统中的应用

文章目录 📑引言一、推荐系统的类型二、数据收集与预处理2.1 数据收集2.2 数据预处理 三、基于内容的推荐3.1 特征提取3.2 计算相似度3.3 推荐物品 四、协同过滤推荐4.1 基于用户的协同过滤4.2 基于物品的协同过滤 五、混合推荐与评估推荐系统5.1 结合推荐结果5.2 评…

docker 下载镜像发现超时,加速加速方法

报错原因有可能旧的不能用了!!!换下面的!!! cat /etc/docker/daemon.json "registry-mirrors": ["https://bhu1x6ya.mirror.aliyuncs.com"] 编辑完成后执行以下命令重启docker即可&a…

企业官网:过时了,但又没完全过时

作为一名互联网冲浪级选手,我经常会看到一些有趣的产品。 这两年比较让我感兴趣的产品有「飞聊」、「即刻」及其旗下的「橙 App」等等,然后我就想上它们的官网看看。 虽然现在 app 是主流,但我非常不喜欢下载 app,一是麻烦&…

基于STM32开发的智能空气质量监控系统

⬇帮大家整理了单片机的资料 包括stm32的项目合集【源码开发文档】 点击下方蓝字即可领取,感谢支持!⬇ 点击领取更多嵌入式详细资料 问题讨论,stm32的资料领取可以私信! 目录 引言环境准备智能空气质量监控系统基础代码实现&…

【吊打面试官系列-Mysql面试题】MySQL_fetch_array 和 MySQL_fetch_object 的区别是什么 ?

大家好,我是锋哥。今天分享关于 【MySQL_fetch_array 和 MySQL_fetch_object 的区别是什么 ?】面试题,希望对大家有帮助; MySQL_fetch_array 和 MySQL_fetch_object 的区别是什么 ? 以下是 MySQL_fetch_array 和 MySQL…

高考志愿填报的技巧和方法

高考过后,最让家长和学生需要重视的就是怎样填报志愿。高考完和出成绩之前有一段很长的时间,而成绩出来之后往往报考的时间非常的紧张。在很短的时间内,高考的学生和他的家长要综合高考的成绩,考虑院校,专业&#xff0…

【9】openssl 代码调试

0x01 前言 最近在学习密码学,但是国密算法(SM2,SM3,SM4,SM9)的细节都在openssl项目里,当然一些国际算法也在。想着看下代码执行过程和理论结合起来。中间走了一些弯路,做个笔记。 0x02 openssl安装 一开始认为是不是直接下载好的…

万向节锁死(Gimbal Lock)

Gimbal Lock是一个常见的3D动画问题,主要由旋转顺序引起的。我来详细解释一下它的成因: 在三维空间中,任何旋转都可以分解为绕X,Y,Z三个轴的欧拉旋转(Euler Rotation)。每个轴的旋转是按照一定顺序进行的,比如XYZ或ZYX等。 理论上,通过这三个旋转值的组合,可以达到任意的空间…

14. RTCP 协议

RTCP 协议概述 RTCP(Real-time Transport Control Protocol 或 RTP Control Protocol 或简写 RTCP),实时传输控制协议,是实时传输协议(RTP)的一个姐妹协议。 注:RTP 协议和 RTP 控制协议&#…

Policy-Based Reinforcement Learning(1)

之前提到过Discount Return: Action-value Function : State-value Function: (这里将action A积分掉)这里如果策略函数很好,就会很大;反之策略函数不好,就会很小。 对于离散类型: …

QPS,平均时延和并发数

我们当前有两个服务A和B,想要知道哪个服务的性能更好,该用什么指标来衡量呢? 1. 单次请求时延 一种最简单的方法就是使用同一请求体同时请求两个服务,性能越好的服务时延越短,即 R T 返回结果的时刻 − 发送请求的…

error 12154 received logging on to the standby报错处理

错误 处理方法 该参数不是主库的servicename (低级错误) SQL> alter system set log_archive_dest_2 SERVICEstandby ASYNC VALID_FOR(ONLINE_LOGFILES,PRIMARY_ROLE) DB_UNIQUE_NAMEstandby; System altered. 观察主库日志: 备库日志: 该问题会影…