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,一经查实,立即删除!

相关文章

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;比如小米公司的“小爱”&#…

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…

通过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年的资深铲屎官…

流程变量的设置和获取

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

细节决定成败——我的日志去哪了?

概述 编写本文档的目的有两点。 本周遇到了一个日志丢失的问题&#xff0c;经过分析&#xff0c;觉得挺有意思的。向大家分享一下我的分析及解决思路。应该在很多项目中都会有该问题。领导和我私下讨论过多次&#xff0c;当前的autodomain代码对文件读取的频率太高了,如何去避…

Spring框架学习 -- 核心思想

目录 (1) Spring是什么? (2) 什么是IOC容器? (3) 从传统开发认识spring (4) 这种传统开发的缺陷 (5)解决传统开发中的缺陷 (6) 对比总结规律 (7) 理解IOC 创作不易多多支持 (1) Spring是什么? 我们常说的Spring的全称是: Spring Framework(Spring框架), 它是一个开源…

北醒携全球首款256线车规量产激光雷达亮相广州国际车展

11月17日&#xff0c;北醒携全球首款256线车规量产激光雷达亮相广州国际车展。在车展期间&#xff0c;北醒还公布了与广州花都区人民政府达成投资合作&#xff0c;获滴滴自动驾驶投资以及与捷普联合打造的全球首条量产256线级别车规激光雷达的生产线即将贯通的等多条利好信息&a…

2023-11-20 LeetCode每日一题(最大子数组和)

2023-11-20每日一题 一、题目编号 53. 最大子数组和二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的…

C语言童年生活二三事(ZZULIOJ1091:童年生活二三事(多实例测试))

题目描述 Redraiment小时候走路喜欢蹦蹦跳跳&#xff0c;他最喜欢在楼梯上跳来跳去。 但年幼的他一次只能走上一阶或者一下子蹦上两阶。 现在一共有N阶台阶&#xff0c;请你计算一下Redraiment从第0阶到第N阶共有几种走法。 输入&#xff1a;输入包括多组数据。 每组数据包括一…

Python开源自动化工具Playwright安装及介绍

一个非常强大的自动化项目叫 playwright-python 它支持主流的浏览器&#xff0c;包含&#xff1a;Chrome、Firefox、Safari、Microsoft Edge 等&#xff0c;同时支持以无头模式、有头模式运行&#xff0c;并提供了同步、异步的 API&#xff0c;可以结合 Pytest 测试框架 使用&…