VS code部署Vue项目Demo

在之前已经在IDEA中部署过vue项目demo。本次在上次基础上进行。

IDEA中Vue的安装和使用【window10】_idea安装vue-CSDN博客

步骤一、安装VSCode

双击安装即可

步骤二:检查npm是否安装

 

步骤三:检查vue是否安装

(vue create 项目名 只要在vue3中才支持)

更新vue,输入命令:

npm install -g @vue/cli

 一直卡着不动。

解决方案:添加淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm报错:request to https://registry.npm.taobao.org failed, reason certificate has expired

解决方案:
1、清空缓存:npm cache clean --force 

2、修改镜像:npm config set registry https://registry.npmmirror.com 【推荐】

参考自:npm报错:request to https://registry.npm.taobao.org failed, reason certificate has expired-CSDN博客 

 重新输入安装命令,依旧报错,采用强制覆盖命令:

npm install -g @vue/cli - -force

参考自:安装vuecli报错npm ERR! EEXIST: file already exists, cmd shim-CSDN博客

此时安装成功。

步骤四:安装安装webpack工具

cnpm install -g webpack 

步骤五:新建vue项目

  • 先创建一个放置项目的文件夹vueCode
  • 在终端中使用cd指令跳转到这个文件夹
  • 创建项目指令:vue create vueprojectdemo01vueprojectdemo01是项目名,可以自己取)

配置项目流程:

  • 上下箭头键:表示选择
  • 回车键:表示确认

1. 选择Manually select features,表示手动配置


2. 选择需要安装的插件,一般选如下勾选项(按空格键选择)


Choose Vue version:选择Vue版本
Babel:解析 es6 转 es5 的插件
TypeScript:TypeScript插件
Progressive Web App (PWA) Support:渐进式Web应用程序(PWA)支持
Router:vue路由插件
Vuex:Vuex插件
CSS Pre-processors:css预处理插件
Linter/Formatter:格式化程序
Unit Testing:单元测试
E2E Testing:端到端(end-to-end)
3. 选择 vue 版本

4. 选择路由模式 是否为 history模式,y表示是,N表示使用hash模式,这里选择的是N

 

history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法(需要特定浏览器支持)
hash: 浏览器url址栏 中的 # 符号(如这个 URL:http://www.abcd.com/#/hello,hash 的值为“ #/hello”),hash 不被包括在 HTTP 请求中(对后端完全没有影响),因此改变 hash 不会重新加载页面。更容易进行打包上传服务器
5. 选择使用那种css预处理器,这里选择的是 第二种 scss with node-sass

6. 选择编码规则,建议初学者选择第一项,表示只有报错时才会验证

(1) ESLint with error prevention only  只配置使用 ESLint 官网的推荐规则

(2) ESLint + Airbnb config   官网推荐的规则 + Airbnb 第三方的配置

(3) ESLint + Standard config  使用 ESLint 官网推荐的规则 + Standard第三方的配置

(4) ESLint + Prettier 使用 ESLint 官网推荐的规则 + Prettier 第三方的配置

7. 何时检测?这里选的是每次保存时验证Lint on save


Lint on save: 保存就检测

Lint and fix on commit:fix和commit时候检查

8. 如何存放配置 ?这里使用 package.json


In dedicated config files :独立文件放置
In package.json:放package.json里
9. 是否保存本次配置(之后可以直接使用),这里选的是保存y


10.保持本次配置的信息并命名(随便取),下次就可以直接使用本次配置,无需从新手动配置

11. 配置完成

参考自:vue3安装和开发环境搭建_use babel alongside typescript (required for moder-CSDN博客 

步骤六:运行项目

在vsCode中打开刚才vue项目所在文件夹

即可看到项目框架

 打开VSCode终端

  • 指令:cd vueprojectdemo01(进入项目文件夹)
  • 指令:npm run serve(启动项目 )
  • 执行完之后 ,显示 Compiled successfully in ***,表示运行成功

输入网络http://localhost:8080即可访问。 

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

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

相关文章

9.指针与链表

一、指针 1.基本介绍 在程序中,我们的数据都有其存储的地址。在程序每次的实际运行过程中,变量在物理内存中的存储位置不尽相同。不过,我们仍能够在编程时,通过一定的语句,来取得数据在内存中的地址。地址也是数据。…

Leetcode 单词规律

即判断给定的模式字符串(pattern)和单词字符串(s)是否遵循相同的对应规则。具体来说,就是要判断 pattern 中的字符与 s 中的单词是否存在一一对应的关系,即双射(bijection)。 算法思…

安卓无障碍获取录屏权限

每次需要录屏操作时,都会弹窗需要用户手动授权比较麻烦,可以通过无障碍模拟用户点击进行授权。 方法主要有三种: 1.查找“立即开始”(华为手机是“允许”)节点,模拟点击; Overridepublic void…

【解决办法】git clone报错unable to access ‘xxx‘: SSL certificate problem

git clone 是 Git 版本控制系统中的一个基本命令,用于从远程仓库复制一个完整的版本库到本地。这个命令不仅复制远程仓库中的所有文件,还复制仓库的历史记录,使得你可以在本地进行版本控制操作,如提交(commit&#xff…

Electron+Vue实现两种方式的截屏功能

本次介绍的截屏功能一共有两种分别是在electron环境中与非electron环境中 非electron环境 这个环境下会有一些限制: 1.只能截浏览器中的画面 2.如果里面有iframe或者base64的图片会加载不出来(这个会有解决办法) yarn add -D js-web-scree…

Java爬虫:获取商品评论数据的高效工具

在电子商务的激烈竞争中,商品评论作为消费者购买决策的重要参考,对于商家来说具有极高的价值。它不仅能够帮助商家了解消费者的需求和反馈,还能作为改进产品和服务的依据。Java爬虫技术,以其稳健性和高效性,成为了获取…

基于Spring Cloud的电商系统设计与实现——用户与商品模块的研究(上)

操作系统:Windows Java开发包:JDK1.8 项目管理工具:Maven3.6.0 项目开发工具:IntelliJIDEA 数据库:MySQL Spring Cloud版本:Finchley.SR2 Spring Boot版本:2.0.6.RELEASE 目录 用户模块—user-…

Android 通过计算器暗码启动应用

项目不带通话功能&#xff0c;要求通过计算器输入暗码打开测试应用。 查看布局文件 数字显示控件 packages\apps\ExactCalculator\res\layout\display_one_line.xml ...<com.android.calculator2.CalculatorScrollViewandroid:id"id/formula_container"android:…

golang中的上下文

背景 在Go语言中&#xff0c;使用context包来管理跨API和进程间的请求生命周期是常见的做法。特别是在涉及到并发编程时&#xff0c;如启动协程&#xff08;goroutine&#xff09;来处理异步任务&#xff0c;正确地传递和监听context变得尤为重要。比如&#xff0c;在gin框架中…

YOLO系列入门:1、YOLO V11环境搭建

YOLO了解 yolo检测原理 yolo是目标检测模型&#xff0c;目标检测包含物体分类、位置预测两个内容。目前yolo的开发公司官网为&#xff1a;https://docs.ultralytics.com/zh截止到目前2024年10月&#xff0c;最新的是yolo11。关于YOLO的介绍可以参考这篇文章&#xff1a;https…

NCCL报错

1、报错信息&#xff1a; raise RuntimeError("Distributed package doesnt have NCCL " "built in") RuntimeError: Distributed package doesnt have NCCL built in 2、报错原因&#xff1a; windows系统不支持nccl&#xff0c;采用gloo&#xff1b; …

@PostConstruct和afterPropertiesSet方法执行多次的原因

近日&#xff0c;遇到一个问题&#xff0c;PostConstruct方法会莫名执行多次&#xff0c;单看代码看不出问题&#xff0c;印象中也只会在bean初始化的时候执行一次而已。 然后问AI&#xff0c;问百度&#xff0c;没找到原因。 后面自己猜测&#xff08;现在都是面向猜测编程&am…

Vue3新特性合集

Vue3 简介 ‌‌Vue 3‌ 是‌Vue.js的最新版本&#xff0c;它带来了许多改进和新的特性&#xff0c;旨在提供更好的性能、更强的类型支持以及更灵活的组件开发方式。Vue 3的推出是为了解决Vue 2中存在的一些限制&#xff0c;如响应式系统的限制和虚拟DOM的效率问题。Vue 3在多…

设定义结构变量

在C语言中&#xff0c;可以使用struct关键字来定义结构变量。结构变量是由多个不同类型的成员变量组成的数据类型&#xff0c;可以在一个变量中存储多个相关的数据。 定义结构变量的语法如下&#xff1a; struct 结构名 {数据类型 成员1;数据类型 成员2;... };例如&#xff0…

Python进阶知识2

Python类和对象 Python从设计之初就已经是一门面向对象的语言&#xff0c;正因为如此&#xff0c;在Python中创建一个类和对象是很容易的。 如果你以前没有接触过面向对象的编程语言&#xff0c;那你可能需要先了解一些面向对象语言的一些基本特征&#xff0c;在头脑里头形成…

[Javase]封装、继承、多态与异常处理

文章目录 一、前言二、封装1、封装的思想2、封装代码层面的体现 三、继承1、继承的概念和好处2、继承代码层面的体现 四、多态1、多态的概念2、多态的好处和三要素2、多态代码层面的体现 五、异常处理1、try-catch-finally结构详解2、throw\throws 一、前言 本文章适合有一定面…

#保持每天更新第一天(1)_文本预处理小技巧_中英文翻译分割技巧_从中文右边空格分割,用rsplit(‘ ‘, 1)

-- coding: utf-8 -- “”" Created on Fri Oct 18 20:58:07 2024 author: M.D “”" import pandas as pd df pd.read_csv(“transversalSkillsCollection_翻译.csv”) data df[“altLabels 替代标签”] 原始数据&#xff0c;每条数据由英文和中文组成 data…

10.15.2024刷华为OD C题型(二)

10.15.2024刷华为OD C题型&#xff08;二&#xff09; 密码输入检测智能成绩表 如果是目标院校150分能过&#xff0c;而且这道题是两百分的话我就阿弥陀佛了。 这类简单类型的字符串处理题目一看就有思路&#xff0c;起码能做&#xff0c;遇到那种稍微加点数学的&#xff0c;感…

【CMake】为可执行程序或静态库添加 Qt 资源文件,静态库不生效问题

【CMake】添加静态库中的 Qt 资源 文章目录 可执行程序1. 创建资源文件&#xff08;.qrc&#xff09;2. 修改 CMakeLists.txt3. 使用资源文件 静态库1. 修改 CMakeLists.txt2. 使用资源2.1 初始化资源文件2.2 可执行程序中调用 这里介绍的不是使用 Qt 创建工程时默认的 CMakeLi…

【从零开始的LeetCode-算法】3099. 哈沙德数

如果一个整数能够被其各个数位上的数字之和整除&#xff0c;则称之为 哈沙德数&#xff08;Harshad number&#xff09;。给你一个整数 x 。如果 x 是 哈沙德数 &#xff0c;则返回 x 各个数位上的数字之和&#xff0c;否则&#xff0c;返回 -1 。 示例 1&#xff1a; 输入&am…