VSCode新建Vue项目

前言

Vue.js 是一款流行的 JavaScript 前端框架,它可以帮助开发者轻松构建高性能、可扩展的 Web 应用程序。而 VSCode 则是一款功能强大的开源代码编辑器,它提供了许多有用的工具和插件,可以大幅提高开发效率。

在本文中,我们将介绍如何使用 VSCode 来创建一个全新的 Vue.js 项目。我们将从安装必要的软件开始,一步步地引导您完成整个过程。同时,我们还将分享一些有用的技巧和建议,以帮助您更好地利用 VSCode 和 Vue.js 来开发 Web 应用程序。

接下来,让我们开始吧!

一、环境配置

1、node.js

Node.js 是一款基于 Chrome V8 引擎的 JavaScript 运行时,可以在服务器端运行 JavaScript 代码。在安装 Node.js 之前,您需要确定您的系统是否已经安装了 npm(Node 包管理器),因为它是 Node.js 的默认软件包管理工具。

以下是在 Windows、macOS 和 Linux 上安装 Node.js 的步骤:

在 Windows 上安装 Node.js:

  1. 访问 Node.js 的官方网站 https://nodejs.org/,下载最新的 Windows 版本的安装程序。
  2. 运行下载的安装程序,并按照提示完成安装。
  3. 在安装过程中可以选择自定义安装路径,也可以使用默认路径。

在 macOS 上安装 Node.js:

  1. 使用 Homebrew 安装 Node.js,打开终端并输入以下命令:brew install node
  2. 等待安装完成即可。

在 Linux 上安装 Node.js:

  1. 在终端中输入以下命令以添加 Node.js 源:curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
  2. 安装 Node.js:sudo apt-get install -y nodejs

安装完成后,您可以在终端输入 node -v 命令来检查 Node.js 是否已经成功安装。如果显示了 Node.js 的版本号,则说明安装成功。同时,您还可以使用 npm -v 命令来检查是否已经安装了 npm。

输出:node -v 检查 

 

2、安装配置脚手架vue-cli

要安装并配置 Vue 项目的脚手架 vue-cli,您可以按照以下步骤进行操作:

  1. 首先,确保您已经成功安装了 Node.js 和 npm。您可以在命令行中分别输入 node -vnpm -v 来验证它们的安装情况。

  2. 接下来,使用 npm 安装 vue-cli。在命令行中执行以下命令:

    npm install -g @vue/cli

    这将全局安装 Vue 的命令行工具。安装完成后,您就可以在命令行中访问 vue 命令。

  3. 确认 vue-cli 是否安装成功。在命令行中执行以下命令:

    vue --version

    如果显示了 vue-cli 的版本号,则说明安装成功。

  4. 创建一个新的 Vue 项目。在命令行中执行以下命令:

    vue create my-vue-project

    这将引导您通过创建一个新的 Vue 项目的过程,在过程中您可以选择使用默认预设或手动选择特性来配置项目。

  5. 进入到新创建的项目目录中:

    cd my-vue-project
  6. 启动开发服务器。在命令行中执行以下命令:

    npm run serve

    这将启动一个开发服务器,并在命令行中显示访问该服务器的 URL 地址。

这样,您就成功安装并配置了 Vue 项目的脚手架 vue-cli。现在,您可以开始编写 Vue 组件和页面,进行开发工作了。

3、安装 @vue/cli-init 全局插件

为了避免权限问题,可以按照以下步骤来解决此问题:

1。打开 PowerShell 命令行界面。

        1)打开开始菜单,找到 "Windows PowerShell"。

        2)在 "Windows PowerShell" 上右键单击,并选择 "以管理员身份运行"。

2.在 PowerShell 窗口中,输入以下命令并按 Enter 键:

npm install -g @vue/cli-init

这会全局安装 @vue/cli-init 插件。

3.安装完成后,再次运行您之前的命令:

vue init webpack work1

现在应该能够正常执行 vue init 命令,而不再收到该错误提示。

请注意,如果您之前已经安装了 @vue/cli-init 插件,可能需要更新为最新版本。您可以使用以下命令来更新插件:

npm update -g @vue/cli-init

 二、创建vue项目

1.命令方式创建

这个命令是用于使用Vue CLI创建一个新的基于Webpack模板的Vue.js项目。具体来说:

  • vue init 是Vue CLI提供的命令,用于初始化一个新的Vue.js项目。
  • webpack 是指定使用Webpack作为项目的构建工具和打包工具,这意味着项目将会基于Webpack模板创建。
  • work1 是你为项目指定的名称,也是新创建的项目的目录名称。

通过执行这个命令,Vue CLI会引导你完成一系列的配置选项,如项目名称、描述、作者等,然后自动生成一个基于Webpack模板的Vue.js项目的基本结构和配置文件。这样你就可以在这个基础上开发你的Vue.js应用了。

vue init webpack work1

运行之后的结果

? Project name project
? Project description A Vue.js project
? Author qiu <qiu5557@qq.com>
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npmvue-cli · Generated "work1".

这些信息说明了项目的名称、描述、作者、Vue.js 构建方式、是否安装了 vue-router、是否使用 ESLint 进行代码检查、选择的 ESLint 预设、是否设了单元测试、选择的测试运行器、是否设置了端对端测试,以及项目创建后是否自动运行 npm install 来安装依赖。

如果使用 npm run dev 报错的话

 We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): y
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...

就是用 npm install 命令安装。 

2.重新初始化依赖

(1)按照上图的提示,cd 到刚才项目目录
(2)执行npm cache clean --force 清除缓存
(3)执行npm install 重新初始化依赖。

3、启动项目

点击http://localhost:8080 能够跳到这个网页就表示成功了

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

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

相关文章

用javascript方法,禁止用户操作页面

屏蔽F12 审查元素 // 屏蔽F12 审查元素 document.onkeydown function(){if(window.event && window.event.keyCode 123) {alert("F12被禁用");event.keyCode0;event.returnValuefalse;}if(window.event && window.event.keyCode 13) {window.eve…

vivado产生报告阅读分析13-时序报告9

1、Report Exceptions 在综合后的流程中可随时使用“ Report Exceptions ” &#xff08; 例外报告 &#xff09; 命令。“ Report Exception ”命令用于报告以下信息&#xff1a; • 在设计中已置位并且影响时序分析的所有时序例外 • 在设计中已置位但由于被其他时序例外覆…

UE4 基础篇十四:自定义插件

文末有视频地址和git地址 一、概念 虚幻里插件都是用C++写的,C++包括.h文件和.cpp文件,.h头文件通常包含函数类型和函数声明,cpp文件包含这些类型和函数的实现, 你为项目编写的所有代码文件都必须位于模块中,模块就是硬盘里的一个文件夹,包含名为“Build.cs”的C#文件…

vue实现el-menu与el-tabs联动

效果图如下&#xff1a; 当标签栏很多的时候效果图如下&#xff1a; 左侧菜单布局 &#xff08;$route.path高亮显示激活路由 :default-active"$route.path"&#xff09; <el-menu:default-active"$route.path"class"el-menu-vertical-demo"b…

PaaS、 IaaS 和 SaaS 的区别

我感觉我有点捂了 iaas&#xff0c;paas&#xff0c;和saas的区别&#xff0c;以及他们啥意思了 简单说就是&#xff0c;一个公司有很多项目&#xff0c;要管理这些项目&#xff0c;每个项目都有很多组成部分需要管理的地方&#xff0c;例如&#xff0c;存储代码&#xff0c;例…

掌握5个关键点,搞定语音识别测试!

现在市面上的智能电子产品千千万&#xff0c;为了达到人们使用更加方便的目的&#xff0c;很多智能产品都开发了语音识别功能&#xff0c;用来语音唤醒进行交互&#xff1b; 另外&#xff0c;各大公司也开发出来了各种智能语音机器人&#xff0c;比如小米公司的“小爱”&#…

【基础架构】part-1 高可用策略总结

​ 系统应该保持高可用性&#xff0c;以确保用户能够始终访问和使用系统。这可以通过设计冗余和容错机制来实现&#xff0c;如负载均衡、故障转移、备份和恢复策略等。 1.1、引入冗余 通过冗余架构设计&#xff0c;如使用多个服务器节点、多个数据中心或云区域&#xff0c;确…

UE5 操作WebSocket

插件&#xff1a;https://www.unrealengine.com/marketplace/zh-CN/product/websocket-client 参考&#xff1a;http://dascad.net/html/websocket/bp_index.html 1. 安装Plugings 2.测试websocket服务器 http://www.websocket-test.com/ 3.连接服务器 如果在Level BP里使用&a…

4-11 四个数排序

#include<stdio.h> int main(){int t,a,b,c,d;printf("请输入四个数&#xff1a;");scanf("%d %d %d %d",&a,&b,&c,&d);printf("a%d,b%d,c%d,d%d\n",a,b,c,d);if(a>b){ta;ab;bt;}if(a>c){ta;ac;ct;}if(a>d){ta;a…

AcWing102. 最佳牛围栏

题目 农夫约翰的农场由 N N N 块田地组成&#xff0c;每块地里都有一定数量的牛&#xff0c;其数量不会少于 1 头&#xff0c;也不会超过 2000 头。 约翰希望用围栏将一部分连续的田地围起来&#xff0c;并使得围起来的区域内每块地包含的牛的数量的平均值达到最大。 围起区…

通过AppLink把拼多多热门榜单商品同步至小红书

上篇说到AppLink当中定时调度方式如何配置&#xff0c;这次来演示一下&#xff0c;如何把热门榜单信息同步至小红书 1.拉取一个定时器作为触发动作&#xff0c;通过配置定时器调度时间将定时策略配置为每天执行一次 2.触发动作完成后通过好单库获取拼多多每日热门榜单&#xf…

UE5、CesiumForUnreal实现加载GeoJson绘制盒体(Box)功能(StaticMesh方式)

文章目录 1.实现目标2.实现过程2.1 实现原理2.2 具体代码2.3 应用测试2.3.1 材质2.3.2 蓝图测试3.参考资料1.实现目标 与之前基于StaticMesh创建Polygon和Wall类似,本文通过读取本地GeoJson数据,在UE中以staticMeshComponent的形式绘制出盒体Box,支持Editor和Runtime模式,在…

UE4基础篇十五:AI行为树

一、学习完教程后需要掌握知识点 1.1、基础概念: 1.1 行为树:控制并显示AI的决策制定过程 1.2 黑板:可以看做是行为树的创建一些公有变量,外部可以修改行为树黑板的变量值,达到修改行为树状态的逻辑 1.3 环境查询: 获取地图环境中的信息进行一个筛选,查找到所需要的的…

性能小课堂:Jmeter录制手机app脚本!

环境准备&#xff1a;1.手机2.wifi3.Jmeter 具体步骤&#xff1a; 1、启动Jmeter&#xff1b; 2、“测试计划”中添加“线程组”&#xff1b; 3、“工作台”中添加“HTTP代理服务器”&#xff1b; 4、配置代理服务器&#xff1a;Global Settings下面的端口配置&#xff1a…

集成仿真软件 PLEXOS 9.0 授权永久完美

PLEXOS是由能源示例发布的能源市场集成仿真软件。能源市场是一个充满活力和活力的市场&#xff0c;在这个大市场中有各种各样的数据和信息模型。观看每日市场发展和大量数据可能会使您感到困惑&#xff0c;并难以进行未来的投资和分析。使用集成和全面的方法是应对这一挑战的唯…

随笔-事儿就这么个事儿

好久没写了&#xff0c;小A要催更&#xff0c;还答应让我写一下他的经历&#xff0c;这还有啥说的&#xff0c;开整。 1、升级 前段时间登录公司的办公系统处理一个事务申请&#xff0c;发现有个粗体标红的通知&#xff0c;是关于今年的晋升名单公示。进去看了一眼&#xff0…

养猫7年:猫罐头牌子哪个好用?5款口碑好的猫罐头推荐!

猫罐头牌子哪个好用&#xff1f;刚开始养猫真的好心累&#xff0c;因为一开始啥也不懂&#xff0c;关于猫猫的饮食这也不会选那也不会选&#xff0c;就很容易踩雷&#xff0c;为此花了不少钱&#xff0c;相信很多新手铲屎官现在也处于这种状态吧。 作为一个养猫7年的资深铲屎官…

容器 - 八大架构的演进

Docker 容器虚拟化核心技术docker生态、架构及组成部分容器编排详解核心原理实现 我目前就来学学基本知识。 八大架构的演进 文章目录 Docker八大架构的演进1. 单机架构2. 应用数据分离架构3. 应用服务集群架构4. 读写分离/主从分离架构5. 冷热分离架构6. 垂直分库架构/分布…

OpenAI 的 API 简介

OpenAI Completions API 是 OpenAI 提供的一项服务&#xff0c;允许开发者利用 OpenAI 的语言模型&#xff08;例如 GPT-3 或 GPT-4&#xff09;生成文本。当开发者向该 API 提供一个文本提示&#xff08;prompt&#xff09;时&#xff0c;语言模型会尝试生成一个自然且连贯的文…

流程变量的设置和获取

流程变量在整个工作流中扮演很重要的作用。例如&#xff1a;请假流程中有请假天数、请假原因等一些参数都为流程变量的范围。流程变量的作用域范围是只对应一个流程实例。也就是说各个流程实例的流程变量是不相互影响的。这篇博文就简单的为大家介绍下流程变量的设置和获取。 …