使用CLI脚手架搭建Vue2项目

news2024/9/22 1:37:30

一、配置前端的环境

1、下载安装Node.js

网址:Node.js 中文网 (nodejs.com.cn)

参考:【简明图文教程】Node.js的下载、安装、环境配置及测试_node下载安装-CSDN博客

推荐安装路径C盘改为D盘

2、配置nodejs及环境变量【安装的时候勾选Add to PATH就不用配置】

npm全局模块的安装路径以及缓存cache的路径。

(1)nodejs下新建两个文件夹【node_global】和【node_cache】

(2)打开cmd,建议管理员身份(路径是刚刚新建的路径)

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

(3)配置环境变量

①打开窗口:依次执行【此电脑】-->【右键】-->【属性】-->【高级系统设置】-->【高级】-->【环境变量】,打开环境变量设置窗口

②系统变量点新建

输入变量名和变量值
变量名:NODE_PATH
变量值:D:\ProgramFiles\nodejs\node_global\node_modules

③检查

打开文件夹【node_global】,查看是否有多出了一个【node_modules】文件夹

注:如果 文件夹【node_global】里没有出现 【node_modules】文件夹,则在【node_global】下手动创建一个【node_modules】文件夹,再复制你创建的【node_modules】文件夹的路径地址到变量值。

④选中系统变量Path,点击编辑,追加

D:\Program Files\nodejs\

%NODE PATH%

3、检查node和npm是否安装成功

二、安装Vue CLI

1、命令行安装Vue CLI

npm install -g @vue/cli

如下,执行成功(管理员身份运行)

2、成功结果

三、创建新项目

提示:需要使用管理员身份,否在报错,如下图

1、命令行新建项目

win键cmd选择使用管理员身份打开,F:或者其他目标盘,cd跳转到目标文件中,输入命令行

vue create your-project-name

需要选择是否需要下载可以点Y

提示选择preset, 选择Vue2即可

提示选择,npm即可

示意图如下:

2、用VS Code管理员身份打开项目,运行

npm run serve

运行成功标志:

你可以在浏览器中访问 http://localhost:8080 来预览你的应用。

按住ctrl点击连接也可以打开浏览器

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

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

相关文章

[算法]归并排序(C语言实现)

一、归并排序的定义 归并排序(Merge sort)是建立在归并操作上的一种有效的排序算法。该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。 二、归并排序的算法原理 归并排序的算法可以用递归法和非递归法来实现…

2024新版python安装教程【附图片】

Python的安装步骤因操作系统而异,但大致可以分为下载、安装和验证三个主要步骤。以下是Windows系统中Python的详细安装步骤: Windows系统 下载Python安装包 访问Python官网(https://www.python.org/)。点击页面头部的“Download…

【优秀python django系统案例】基于python的医院挂号管理系统,角色包括医生、患者、管理员三种

随着信息技术的迅猛发展,传统的医院挂号管理方式面临着效率低下、排队时间长、信息不对称等诸多问题。这些问题不仅影响患者的就医体验,也加重了医院工作人员的负担。在此背景下,基于Python的医院挂号管理系统应运而生。该系统旨在通过信息化…

OZON饰品产品什么好卖,OZON热销饰品有哪些

在OZON平台上,饰品产品的销售情况受多种因素影响,包括市场需求、季节变化、消费者偏好以及流行趋势等。以下是一些可能热销的OZON饰品产品类别及具体推荐: OZON热销饰品地址:D。DDqbt。COm/74rDTop1 发带套装 Утика Ком…

Idea常用快捷键:设置自动导包、格式化、抽取方法

Idea设置自动导包 【File】→【Setting】(或使用快捷键【Crlt Shift S】)打开Setting设置。点击【Editor】→【General】→【Auto Import】。勾选自定导包的选项,并确定,如下: Addunambiguousimportsonthefly:添加明确的导入 …

CSP-J 2022基础知识答案与解析

1.以下哪种功能没有涉及 C语言的面向对象特性支持:( )。 (2 分) A.C中调用 printf 函数 B.C中调用用户定义的类成员函数 C.C中构造一个 class 或 struct D.C中构造来源于同一基类的多个派生类 解析:printf是继承自C的&#…

vue2学习 -- 核心语法(二)

文章目录 1. 绑定样式1.1 绑定class1.2 绑定style 2. 渲染2.1 条件渲染2.2 列表渲染key的作用 3. 监视数据3.1 vue监视数据的原理_对象3.2 vue监视数据的原理_数组 4. 收集表单数据5. 过滤器6. 指令6.1 内置指令6.2 自定义指令 7. 生命周期 1. 绑定样式 1.1 绑定class 三种写…

基于LK光流提取算法的图像序列晃动程度计算matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 光流的概念 4.2 基于LK光流算法的图像序列晃动程度计算 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a 3.部分核心程序 &…

前方高能!2024 MongoDB中国用户大会正式官宣!

前方重磅! 2024 MongoDB 中国用户大会 正式官宣! 聆听最新产品发布与主题演讲 get行业头部客户案例的精彩分享 与各届优秀同行们现场交流⼼得 与资深MongoDB⼯程师面对面答疑解惑 ⼀起把MongoDB的酷炫周边收⼊囊中! …… 欢迎所有Mong…

告别单一渠道,全渠道整合营销让企业营销力MAX!

现阶段,企业纷纷积极寻求新的道路,以拓展国际市场、增强品牌影响力。今天咱们来聊聊全渠道营销那点事儿,特别是对那些想出海闯荡一番的中国企业来说,这可是个必备神器!NetFarmer专门企业搞定数字化出海,现在…

室内养猫空气净化器哪个好?真实室内养猫空气净化器使用评价

作为一个养猫多年的猫奴,家里有两只可爱的小猫咪:小白和小花。虽然相处起来很开心,但也给生活带来了一些小麻烦。感受一下40度高温的养猫人,给掉毛怪疏毛浮毛飘飘,逃不过的饮水机,各个角落,多猫…

七夕节高逼格表白方式,送给你的那个TA(可写字版)

别人都有爱心代码了,咱们开发者们也必须有。今天给大家分享个用 Python 写的爱心代码项目,如果感兴趣或者想给自己的另一半制造小浪漫的同学可以自己上手试一试。 运行结果 ** 温馨提示:篇幅有限,源码已打包文件夹,获…

ECRS工时分析软件:工业工程精益生产的智慧引擎

在工业工程学的广阔领域中,程序分析一直扮演着至关重要的角色。其中,ECRS四大原则——取消、合并、重排、简化,作为程序分析的核心,旨在通过优化生产过程,实现成本的节省和精益生产的目标。如今,随着科技的…

【C++】C++入门知识详解(下)

大家好~我们接着【C】C入门知识详解(上)-CSDN博客来介绍另一些C入门基础知识。 1.缺省值和缺省参数 缺省参数就是声明或定义函数时为函数的参数指定一个缺省参数。在调用该函数时,如果没有指定实参,则采用该形参的缺省值&#xf…

ChatGPT:GPT,GPT2,GPT3,Prompt

1,GPT 1.1,GPT结构 GPT is short for Generative Pretrained Transformer。其实GPT和BERT的区别就写在他们的脸上。GPT是Generative的,目的就是要生成。它是一个预训练的Transformer,因为目的就是要生成,所以是Decode…

C++ unordered_map

1. unordered系列关联式容器 在C98 中, STL 提供了底层为红黑树结构的一系列关联式容器,在查询时效率可达到 ,即最差情况下需要比较红黑树的高度次,当树中的节点非常多时,查询效率也不理想。最好的查询是&#xff0c…

亚马逊VC账号特权及SC升级至VC策略解析——WAYLI威利跨境助力商家

亚马逊的VC(Vendor Central)账号和SC(Selling on Amazon)账号在运营策略上有显著差异,这些差异主要体现在账号安全性、数据获取、广告投放以及费用结构等方面。 VC账号特权 1、高安全性:VC账号相较于SC账号具有更高的安全性。由于亚马逊平台对不同卖家账…

【Python数据结构与算法】递归----上台阶

题目&#xff1a;上台阶 描述 有n级台阶&#xff08;0<n<20&#xff09;&#xff0c;从下面开始走要走到所有台阶上面&#xff0c;每步可以走一级或两级&#xff0c;问有多少种不同的走法。 输入 一个整数n 输出 走法总数 样例输入 4样例输出 5AC代码 def ways(n): …

前端-如何通过docker打包Vue服务成镜像并在本地运行(本地可以通过http://localhost:8080/访问前端服务)

1、下载安装docker&#xff0c;最好在vs code里安装docker的插件。 下载链接&#xff1a;https://www.docker.com/products/docker-desktop &#x1f389; Docker 简介和安装 - Docker 快速入门 - 易文档 (easydoc.net) 2、准备配置文件-dockerfile文件和nginx.conf文件 do…

YOLO:训练自己的样本数据集进行目标检测

作者&#xff1a;CSDN _养乐多_ 本文将介绍如何使用python语言和 ultralytics 库训练自己的数据集&#xff0c;并进行 YOLO 目标检测模型训练和推理的代码。 文章目录 一、样本数据集准备1.1 标注工具1.2 数据集格式1.2.1 图片和标签数据集制作1.2.2 data.yaml制作 二、模型训…