Html第1集：WebStorm 安装、vue3.0 安装、npm安装

已于 2022-08-24 14:53:53 修改
阅读量1k 收藏 2
点赞数
分类专栏： 前端学习笔记 文章标签： 前端 学习 webstorm
于 2022-08-17 10:03:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoyanjun6/article/details/126379205
版权

转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/126379205
本文出自【赵彦军的博客】

文章目录

从今天起，我就开始自学前端知识，更新一系列文章。

WebStorm

WebStorm 是 jetbrains 公司开发的一个前端开发工具，功能很强大。下载安装就不细讲了。

https://www.jetbrains.com/webstorm/

vue3.0 安装

https://cn.vuejs.org/

vue3.0 易学易用，性能出色，适用场景丰富的 Web 前端框架。

安装官网的的安装说明, 在命令行执行

npm init vue@latest

在这里插入图片描述
提示我没有安装 npm

npm 安装

什么是 npm

NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费

什么是 node.js

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， 让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

怎么安装 node.js 环境

npm自node.js v0.6.x版以后就内嵌在node.js中，所以安装node.js就可以了。

首先到 node.js 官网下载 node.js 安装包，并且安装

http://nodejs.cn/download/

在这里插入图片描述

安装 vue

node.js 安装完成，就可以再次执行 vue 安装命令

npm init vue@latest

看到下面的提示，就说明安装成功了
在这里插入图片描述

查看 npm 安装目录

 which npm

在这里插入图片描述

vue 安装完查看

vue 安装完成后，会在你的安装路径下生成一个 vue-project 目录，里面就是 vue 的框架代码
在这里插入图片描述

赵彦军
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebStorm创建Vue项目教程（一）安装node.js和npm
j_l_sheng的博客
07-13 3978
Node.js 是一个JavaScript 运行环境。npm（Node Package Manager）是Node.js 的包管理器，它的初衷是使得JavaScript开发人员更容易分享和重用代码。
【Vue3】使用Vite构建工具构建Vue3项目
早睡早起长头发的博客
08-17 6562
一、利用cmd和vscode创建 二、利用webstorm创建
前端Vue3开发工具对比：VSCode，IntelliJ IDEA，WebStorm
最新发布
m0_70984835的博客
07-04 1269
前端开发工具对比
【内网】WebStorm搭建Vue环境
一七
04-24 6625
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
WebStrom创建Vue3+Element-Plus项目
小小爪哇工程师的博客
09-18 5713
在element-plus官网复制Button 按钮源代码 粘贴到HelloWord.vue中。再次把button代码复制到helloword文件中，启动项目。此时需要安装typescript和ts-loader。node自己配置了环境变量，直接打开cmd查看版本。打开src目录下的main.js 替换成下面代码。再次启动项目，报如下错误，原因是上图复制的代码中。（2）等待项目自动初始化完成，点击运行。（4）出现下面页面，表示vue创建成功。（3）启动完成，点击地址访问。在项目目录中执行cmd命令。
种草 Vue3 中几个好玩的插件和配置
江南一点雨的专栏
08-17 4703
小伙伴们知道 TienChin 项目前端用的是 Vue3，当我们把 Vue3 官网刷了一遍之后回来看 TienChin 项目的前端，发现还是有很多不太一样的地方，今天松哥就来和大家捋一捋 Vue3 中几个好玩的插件和配置，学完之后，相信大家对 TienChin 项目前端的很多写法就明白了。...
vue: WebStorm设置快速编译运行的方法
10-17
WebStorm是一款由JetBrains公司开发的集成开发环境(IDE)，广泛应用于前端开发工作中，它支持Vue.js等流行的前端技术。Vue.js是一个前端JavaScript框架，用于构建用户界面和单页应用程序。在使用WebStorm进行Vue项目...
vue-cli中安装方法(图文详细步骤)
10-17
1. 安装Node.js环境：由于vue-cli基于Node.js的npm包管理器进行安装和管理，所以需要首先确保安装了Node.js环境。安装Node.js时，npm也会一并安装。可以通过访问Node.js官方网站下载安装包进行安装。安装完成后，...
webstorm+vue初始化项目的方法
12-12
Vue CLI提供了一系列模板来快速创建Vue项目，通过`npm install -g vue-cli`命令进行全局安装。如果你已经安装了较旧版本的Vue CLI，可以使用`npm uninstall -g vue-cli`卸载后再重新安装最新版。 初始化Vue项目时，...
nodejs-webstorm:WebStorm中的Node.js开发工作流程
05-04
- **插件系统**：WebStorm允许你安装各种插件以扩展其功能，例如安装Docker支持、Vue.js或React插件。 - **主题和键盘映射**：自定义界面主题和键盘快捷键，使开发环境适应个人习惯。 总之，WebStorm作为一款强大...
【VUE3】保姆级创建干净项目
qq_62543337的博客
11-04 685
VUE3干净项目创建
vue3创建项目及基础配置
weixin_43893844的博客
10-09 1999
vue3项目创建，vue-router，pinia，scss配置及使用
webstrom 运行 vue项目_vue3.0创建项目及API讲解（一）
weixin_39546312的博客
10-27 614
一、项目创建1、检查vue-cli脚手架版本（vue -V），低版本的要更新（npm install @vue/cli -g）2、创建项目（vue create vue3test ）选择default（直接回车enter）,初始化项目3、进入项目文件夹，更新vue版本（vue add vue-next）4、运行项目（npm run serve）5、浏览器上访问（http://localhost:8...
WebStorm使用CNPM
D_A_I_H_A_O的博客
04-25 478
1、Node.js是一个基于Chrome V8引擎的JavaScript运行环境，2、cnpm是淘宝NPM镜像3、WebStorm则是一款功能强大的JavaScript集成开发环境（IDE）
手把手学习Vue3.0：开发工具WebStorm和Vue模板文件介绍
帅哥趣谈
03-13 2588
背景 “工欲善其事必先利其器“，走进Vue开发之旅，必须依赖一个趁手的IDE。之前用文本编辑器秀代码的时代过去了，推荐大家使用WebStorm。低版本的WebStorm内嵌没有Vue的文件生成模板，需要手动添加。最新版已经自带模板了，直接新建即可。 IDE工具安装 WebStorm工具安装，一路next到底即可。 WebStorm可以根据自己习惯做一些设置。 WebStorm不需要特殊配置什么，利用vue-cli脚手架生成的项目直接打开就可以开发。 Vue文件内容介绍 <templa
webstorm 设置 npm 环境
MAOTAI的博客
04-19 4325
1.安装nodejs 2.新增文件夹,配置环境变量 环境变量 用户变量 新增 PATH D:\Program Files\nodejs\node_modules\npm 其次：系统变量 增加 NODE_PATH D:\Program Files\nodejs\node_modules 3.接下来的所有的操作；都是在webstorm开发环境下配置。 npm config set prefix "D:\Program Files\nodejs\node_modules\npm...
webstorm使用配置技巧（Vue版）
u012574599的博客
03-01 5189
webstorm配置使用技巧（vue版）
Vue.js 3.0的安装及开发环境的配置
lovewhoilove
11-07 1663
1 Vue.js安装 1.1 使用cdn引入 在页面的<head>标签内使用<script>标签引入即可： <script src="https://unpkg.com/vue@next"></script> 1.2 使用npm安装 npm即node package manager，它是一个Node.js包管理和分发工具，使用npm可以快速安装、使用和升级Vue.js。因此，我们首先需要安装Node.js，这里我们选择LTS版本，下载地址：http://
webstorm使用前的准备——Node.js安装及配置
热门推荐
zhiqingxue的博客
12-07 1万+
主要是为了使用webstorm的前置配置，包括nodejs以及npm和cnpm，也有一些配置过程中踩到的坑，希望大家可以跳过去。
webstorm创建vue3.0项目
08-17
要在WebStorm中创建Vue 3.0项目，可以按照以下步骤进行操作： 1. 打开WebStorm，并选择"Create New Project"（创建新项目）。 2. 在弹出的窗口中，选择"Vue.js"并点击"Create"（创建）按钮。 3. 在下一个窗口中，选择"Vue 3"版本，并为你的项目命名。 4. 选择项目的位置和存储路径，并点击"Create"（创建）按钮。 5. WebStorm将自动为你创建一个Vue 3.0项目的基本结构。 6. 在终端中，进入到你的项目目录，并运行以下命令来安装依赖项： ``` npm install ``` 7. 安装完成后，你可以使用以下命令来启动开发服务器： ``` npm run serve ``` 8. 打开浏览器，并访问指定的地址（通常是`http://localhost:8080`）来预览你的Vue 3.0应用程序。 现在，你已经成功在WebStorm中创建了一个Vue 3.0项目，并可以开始开发你的应用程序了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值