Vue环境的搭建和在vscode上的应用(Window10)

news/2024/7/7 21:26:49

Vue环境的搭建

1.安装:
从官网下载安装包,解压到指定位置,就相当于安装完成了。
2.配置环境变量
找到node.js的文件夹,在里面找到src,把路径复制一下。
我在E盘建立了一个文件夹放node,如图找到bin的路径:

放到环境变量中的Path里:
(此处图片截不出来)
3.测试环境变量配置是否成功(由于环境变量配置的文件夹到bin,bin文件下的东西可以用):

4.修改npm镜像
使用npm的官网镜像下载依赖包速度太慢,为了提高速度,这里我们使用npm淘宝镜像,同样是在cmd中,执行以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org

5.下载pnpm(由于后期创建vue项目时我用npm没有用,所有下了个pnpm),我是在后来新建了文件夹专门放pnpm,再重新配置了环境变量。在总结的时候发现node.js里面可能有pnpm,可以在node.js文件夹里面检测一下:

pnpm -v

6.安装vue-cli脚手架
都设置好后,重新打开cmd,执行以下命令,然后等待安装完成就行。

(如果执行报错的话,就试试用npm,以下涉及到cnpm的,凡是不能执行,都先试试换npm)

cnpm install -g @vue/cli

7.搭建vue项目(vue官网教程):
我的习惯是新建一个文件夹,装项目。打开文件夹的终端:

终端会显示当前的地址:

在这个地址下敲下面命令:

> npm init vue@latest

这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

完成以上步骤后,会出现以project name命名的文件夹,将其以添加文件夹的方式添加到vscode里面。

二、vscode中vue的基本应用

1.打开vscode中的终端,安装vue的相关包:

install npm

安装成功后:
文件中会出现这个node_modules

2.调试

npm run dev

3.结束


http://lihuaxi.xjx100.cn/news/956745.html

相关文章

Nuxt 3.0 全栈开发

Nuxt 3.0 全栈开发 - 杨村长 - 掘金小册核心知识 工程架构 全栈进阶 项目实战&#xff0c;快速精通 Nuxt3 开发&#xff01;。「Nuxt 3.0 全栈开发」由杨村长撰写&#xff0c;299人购买https://s.juejin.cn/ds/S6p7MVo/ 这门课我会全面讲解 Nuxt3 核心知识&#xff0c;然后…

89. 格雷编码 Python

文章目录一、题目描述示例 1示例 2二、代码三、解题思路一、题目描述 n 位格雷码序列 是一个由 2n 个整数组成的序列&#xff0c;其中&#xff1a; 每个整数都在范围 [0, 2^n - 1] 内&#xff08;含 0 和 2^n - 1&#xff09; 第一个整数是 0 一个整数在序列中出现 不超过一次…

【12】linux命令每日分享——echo命令为用户添加密码

大家好&#xff0c;这里是sdust-vrlab&#xff0c;Linux是一种免费使用和自由传播的类UNIX操作系统&#xff0c;Linux的基本思想有两点&#xff1a;一切都是文件&#xff1b;每个文件都有确定的用途&#xff1b;linux涉及到IT行业的方方面面&#xff0c;在我们日常的学习中&…

12.2 基于Django的服务器信息查看应用(CPU信息)

文章目录CPU信息展示图表展示-视图函数设计图表展示-前端界面设计折线图和饼图展示饼图测试折线图celery和Django配合实现定时任务Windows安装redis根据数据库中的数据绘制CPU折线图CPU信息展示 图表展示-视图函数设计 host/views.py def cpu(request):logical_core_num ps…

【论文阅读】Attributed Graph Clustering with Dual Redundancy Reduction(AGC-DRR)

【论文阅读】Attributed Graph Clustering with Dual Redundancy Reduction&#xff08;AGC-DRR&#xff09; 文章目录【论文阅读】Attributed Graph Clustering with Dual Redundancy Reduction&#xff08;AGC-DRR&#xff09;1. 来源2. 动机3. 模型框架4. 方法介绍4.1 基本符…

七【SpringMVC参数绑定】

目录&#x1f6a9;一 . 视图传参到控制器&#x1f6a9;二 . SpringMVC跳转方式&#x1f6a9;三 SpringMVC处理json请求和响应&#x1f6a9;四 SpringMVC静态资源处理✅作者简介&#xff1a;Java-小白后端开发者 &#x1f96d;公认外号&#xff1a;球场上的黑曼巴 &#x1f34e;…

【力扣】 面试题 05.02.二进制数转字符串(超过c++100%)

二进制数转字符串。给定一个介于0和1之间的实数&#xff08;如0.72&#xff09;&#xff0c;类型为double&#xff0c;打印它的二进制表达式。如果该数字无法精确地用32位以内的二进制表示&#xff0c;则打印“ERROR”。示例1:输入&#xff1a;0.625输出&#xff1a;"0.10…

Python @函数装饰器及用法(超级详细)

Python 内置的 3 种函数装饰器&#xff0c;分别是 &#xff20;staticmethod、&#xff20;classmethod 和 property&#xff0c;其中 staticmethod()、classmethod() 和 property() 都是 Python 的内置函数。 那么&#xff0c;函数装饰器的工作原理是怎样的呢&#xff1f;假设…