VS Code开启第一个VUE前端项目(1)

VS Code开启第一个VUE前端项目(3) 对于初学者来说,代码首先需要看的懂,而刚刚赶上架的我,前端知识几乎为0,接下来对VUE项目内部生成的文件中,出现的语法进行介绍,也是记录自己学习的过程。 一,import import Vue from 'vue' import from 这个是ES6里面的特性,完整的写法如下,主要是加载Vue类 import Vue from "../node_modules/vue/d... 阅读详情

最头疼的还是环境的安装配置等操作,也是为了以后忘记,记录自己的前端学习过程。

首先VUE是前端的框架,全称为vue.js,一般需要同node.js一起使用。

一. 下载node.js

一路next就结束了,然后windows+R,输入cmd,打开后台

输入node -v查看是否安装成功

有版本就说明成功了,其中npm也会安装,同样输入npm -v,可以查看安装结果

npm可以用来下载vue,输入命令npm install vue -g和命令npm install vue-cli -g就可以了。

二.安装VS Code

下载最新版就可以了。

需要安装两个插件,vetur插件和中文插件

然后在你自己的工作目录下,点击ctrl+~,打开终端进行,输入命令来插件vue文件。

会出来这样的结果,有些需要给定数据,我的如下:

PS E:\vs_workspace> vue init webpack Demo1


? Project name demo
? Project description A Vue.js project
? Author wxx
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No? Set up unit tests No? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "Demo1".


# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading
Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> uglifyjs-webpack-plugin@0.4.6 postinstall E:\vs_workspace\Demo1\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1096 packages from 643 contributors and audited 11501 packages in 95.001s
found 7 vulnerabilities (6 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

# Project initialization finished!
# ========================

To get started:

  cd Demo1
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

然后再输入两个命令,就可以在本地的localhost:8080/#/中获取我们的Vue结果了

项目的目录也有了

持续更新

我的第一个前端项目,vue项目从零开始创建和运行 ​入门前端,从基础做起,从零开始新建项目。VUE脚手架项目是一个“单页面”应用,即整个项目中只有1个网页! 阅读详情

相关推荐

2020年,前端开发者必备的10个VS Code扩展插件

全文共1689字,预计学习时长5分钟 图源:Unsplash 在2017年,VSCode有260万月活跃用户(这是我找到的最新官方数据,现在肯定更多),可以说是目前最好的代码编辑器。 它最大的一个特点是,插件多可自定义。 MarketPlace(插件商店)提供了大量扩展插件,开发人员完全可以根据需求进行自定义设置,这也有助于编写高质量的代码。 本文将为编写HTML,C...

读芯术的博客 4332

npm audit fix命令使用

执行npm install 出现如下提醒 added 253 packages from 162 contributors and audited 1117 packages in 42.157s found 5 vulnerabilities (1 low, 4 high) run `npm audit fix` to fix them, or `npm audit` for details html 按照控制台提示的命令,输入‘npm audit fix’后提示: 1 package upda

JK酱 2301

vs code中vue常用插件

以上插件大多数都可以通过VS Code的扩展商店进行安装,并且都有详细的安装和使用说明。为了保持插件的更新和最佳性能,建议定期检查并更新已安装的插件。同时,随着技术的发展和Vue生态的变化,新的插件可能会不断出现,因此建议定期关注VS Code插件市场的动态,以便获取最新的工具和功能。

rgrgrwfe的博客 5246

安装vuecli后出现vulnerabilities错误,·vue·不是内部或外部命令,也不是可运行的程序或批处理文件

安装vuecli后出现vulnerabilities错误,·vue·不是内部或外部命令,也不是可运行的程序或批处理文件

qq_55817438的博客 2536

使用VS Code搭建Vue项目

只需安装Node.js和npm,安装Vue CLI,创建Vue项目,打开项目文件夹,启动开发服务器,编辑Vue组件,保存并查看更改,最后构建生产版本。使用Vue CLI,您可以轻松创建一个具有现代开发工具链的Vue项目。您可以使用VS Code的菜单选项“文件”>“打开文件夹”,或使用命令行切换到项目目录。您将看到一个URL,可以在浏览器中打开以查看您的应用程序。现在,您可以使用VS Code来编辑Vue组件文件(以.vue扩展名结尾)。这会将Vue CLI安装到您的计算机上,并使您可以在命令行中使用。

DpgrMl的博客 2298

AI辅助游戏开发实战:Kimi K3提升Unity开发效率与代码质量

在游戏开发领域,有限状态机(FSM)是构建角色AI行为逻辑的核心设计模式,它通过定义明确的状态和转换条件,使游戏实体能够智能地响应环境变化。其原理在于将复杂的行为分解为离散的状态节点,并通过事件驱动状态切换,从而实现清晰、可维护的AI架构。这项技术的价值在于显著提升了游戏角色的行为真实感和开发效率,被广泛应用于NPC行为控制、角色动画管理、UI流程等场景。随着AI编程助手的兴起,开发者现在可以借助如Kimi K3这类工具,通过自然语言指令快速生成和优化FSM等复杂系统的代码框架,将更多精力投入到核心玩法与性

weixin_30430677的博客 410

vue脚手架的搭建

我们学完vue最核心的内容组件之后,我们来了解一下vue脚手架的内容。 什么是脚手架 脚手架就是一个用于快速搭建项目的骨架,对项目所依赖的配置进行初始化的工具。我们利用这个工具可以自动生成一个基于Vue.js的单页面应用的脚手架项目 关于脚手架 在Vue.js中,这个脚手架就是Vue CLI。在最新版本中,Vue CLI有三个组件: CLI(@vue/cli ):全局安装的npm包,提供了终端里的vue命令。 CLI服务(@vue/cli-service):CLI服务是一个开发环境依赖。它是一个npm.

悦.L的博客 558

Visio 2013安装遇阻?手把手教你搞定注册表权限错误1402(附64位系统特殊处理)

本文详细解析了Visio 2013安装过程中常见的注册表权限错误1402问题,特别是在64位系统下的特殊处理方法。通过分步指导如何修改注册表权限、处理Wow6432Node分支以及使用高级工具如subinacl,帮助用户顺利完成安装并避免常见连带问题。

t8u9v0w1x的博客 546

12 vulnerabilities (5 moderate, 2 high, 5 critical)

没用,然后执行 ​​npm cache clean --force​​​ 清除缓存,并删掉 ​​node_modules​​​ 检查 ​​package.json​​ 文件,如果缺少 ,则执行 ​​npm init -y​​。然后把包装回来 ​​npm i​​​,然后 ​​npm run build​​,项目成功运行。Git 拉取项目,然后 npm i 装包,然后报错。执行 ​​npm audit fix​​。

zhangxu1998lq的博客 977

深入解析FastDDS:SHM与DATA-SHARING传输层的性能对比与实现细节

本文深入对比了FastDDS中SHM与DATA-SHARING两种传输层的实现机制与性能差异。SHM采用端口化共享内存模型,存在两次数据拷贝;而DATA-SHARING通过共享历史实现真正的零拷贝,大幅降低延迟与CPU占用。文章结合实战测试数据,为机器人、自动驾驶等高实时性场景提供了关键的性能优化选型与配置指南。

weixin_28358083的博客 232

立创开源桌面激光雕刻机DIY全解析:从悬臂结构、Arduino主控到Marlin固件

本文详细解析了基于立创开源平台的桌面激光雕刻机DIY全过程。重点介绍了悬臂式机械结构的设计与优化,阐述了采用Arduino Mega 2560主控与RAMPS 1.4扩展板的经典控制方案,并深入讲解了Marlin固件的关键配置步骤,包括电机步数计算与激光功能启用,为创客和电子爱好者提供了一套完整的从硬件搭建到软件调试的实战指南。

weixin_42510201的博客 386

found 6 vulnerabilities (3 moderate, 3 high) run `npm audit fix` to fix them, or `npm audit` for d

重装了系统,再次安装了nodejs,就出现了 : found 6 vulnerabilities (3 moderate, 3 high) run `npm audit fix` to fix them, or `npm audit` for details

1万+

Kill5.37版本下,使用ARMcomplier6编译__asm 函数报错的问题

Kill5-5.37版本下,使用ARMcomplier6编译__asm 函数报错的问题 问题简要描述: 昨日更新了keil5软件的版本,从5.17更新到了5.37版本,然后编译STM32项目文件时,软件提示编译报错。报错问题如下: Build started: Project: QKsoftware *** Using Compiler 'V6.18', folder: 'E:\MDK-ARM\ARM\ARM\ARMCLANG\Bin' Build target 'QKsoftware' compiling

weixin_43644424的博客 1万+

在VS Code中创建Vue项目

在VS Code中创建Vue项目的一般步骤如下:1、安装Node.js和npm、2、安装Vue CLI、3、创建Vue项目 本文创建的是带router的vue项目

nan2008zzu的专栏 8532

Keil 丢失编译器版本5、内核文件core_cm3.c报错

若用的是旧版本的core_cm3.c ,就使用编译器v5编译工程;若想用编译器v6,就更新4个相关的内核文件:(CMSIS:Cortex Microcontroller Software Interface Standard,ARM Cortex™ 微控制器软件接口标准)

qq_52804040的博客 6245

经典的YOLOv3和YOLOV5算法详解及代码复现

yolov3和yolov5算法详解及代码复现

hasakie的博客 771

使用 Vue 开发 VS Code 插件前端页面(上)

经过上面的操作,你已经得到了处于同一个文件夹下的能分别独立运行的插件和前端页面子项目,且它们构建好的内容也在同一个文件夹下:插件文件夹下的 dist 文件夹。看到这里你可以回看一下前面的项目结构图,现在你应该对它有了更深入的了解。这篇博客得到的项目为(注意是提交历史中的最早一次,不包含下节的内容):下节将介绍如何将构建的前端页面嵌入插件以及前端页面和插件的通信。

Hi_KER的博客 2720

一般无穷积分的收敛判别法

文章目录积分里的狄屎判别法证明阿贝尔判别法总结补充:级数中的狄屎和Abel 积分里的狄屎判别法 F(u)=∫auf(x)dx在[a,+∞)F(u)=\int_a^uf(x)dx在[a,+\infty)F(u)=∫au​f(x)dx在[a,+∞)有界 x→+∞时,g(x)单减→0x\to+\infty时,g(x)单减\rightarrow0x→+∞时,g(x)单减→0 ⇒\Rightarrow⇒ ...

universe_1207的博客 1万+

VS Code创建第一个Vue项目步骤详细图例

VS Code创建第一个Vue项目步骤详细图例 VS Code创建第一个Vue项目步骤详细图例 创建一个空文件夹Vue.Web,然后在VSCode中打开这个空文件夹 1、全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目 npm install -g vue-cli 2、安装webpack,它是打包js的工具、 npm install -g ...

eNet 1万+

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

vs code 第一次创建前端项目 vuejs 从零开始

第一阶段 虽然网上教程很多,但是还是记录一次完整的步骤 1.安装nodejs,网上一堆的教程,基本上下载后傻瓜式一路next 2.安装npm,网上一堆的教程,也是基本下载后傻瓜式一路next 3.安装完成运行cmd,查看是否安装成功 4.安装cnpm 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。 在命令行中输入...

jytlcl的博客 1万+

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

windows系统安装VS Code,并使用VS Code创建Vue项目完整教程

1、安装VS Code (1)官网下载https://code.visualstudio.com/下载VS Code,按照步骤安装即可。 (2)设置简体中文:Ctrl+Shift+P 或者 选择View >> Command Palette,然后输入Configure Display Language 选择zh-cn,如果没有zh-cn选项,则选择Install additio...

weixin_42315600的博客 2万+

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

使用 Vue 开发的,这 7 个 VS Code 插件万万不可错过!(1)

核心竞争力,怎么才能提高呢?成年人想要改变生活,逆转状态?那就开始学习吧~万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

cwcnl25131的博客 1346

VS Code创建VUE项目(一)工具安装与项目创建

安装Node.js或下载后一步步安装就好(安装过程基本一路直接“”就可以了,直到Finished),我之前已经安装了,详细步骤大家可以百度npm安装或Node.js安装(Node.js会自动安装npm。

shuang的博客 4407

VS Code:让Vue前端开发效率翻倍

V使用VsCode进行前端开发

weixin_45690427的博客 1234

初建 Vue 3 + TypeScript + Vite + VS Code 项目

Vue - Official 插件是 Vue.js 开发者不可或缺的工具,它通过提供丰富的功能如语法高亮、智能感知、错误检查以及最新的模板插值高亮专注模式和响应性可视化,极大地提升了开发效率和体验。关键操作提醒安装后务必禁用 Vetur插件以避免冲突。根据需求在设置中勾选以实现 ref 的自动补全。结合ESLintPrettier等插件可以获得更完善的开发环境。Vue VSCode Snippets 是一款专为 Vue.js 开发者设计的 Visual Studio Code 扩展工具,它通过提供大量。

BillKu的博客 2091

VS Code 安装

vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari。Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。VS Code提供了非常丰富的插件功能,根据你的需要,安装对应的插件可以大大提高开发效率。给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色。

weixin_45210565的博客 2万+
上一篇: 邮票问题---动态规划
下一篇: VS Code开启第一个VUE前端项目(2)
Batman_Encoding
博客等级 码龄10年 13粉丝 10原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值