node环境创建Vue项目

server/2024/12/22 9:09:02/

node环境创建Vue项目

目录

  • node环境创建Vue项目
    • 安装node.js
    • 安装Vue
    • 创建Vue项目

安装node.js

【1】.官网下载

image-20240428204742087

【2】.选择路径

image-20240428204839301

【3】配置环境变量

image-20240428204958432

后面就是一路next完成安装

【4】测试

cmd输入node指令,显示版本号证明安装成功

image-20240428205120362

安装Vue

【1】安装cnpm

这是由淘宝提供的npm镜像,以后装模块用它代替npm

npm install -g cnpm --registry=https://registry.npmmirror.com

如果安装失败可以尝试以下方法
方案【1】:

清空缓存
npm cache clean --force

关闭SSL验证
npm config set strict-ssl false

安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )

方案【2】:

清空缓存
npm cache clean --force

切换新源
npm config set registry https://registry.npmmirror.com

查看源是否设置成功
npm config get registry

安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )

【2】安装Vue脚手架

cnpm install -g @vue/cli

【3】创建Vue项目

vue create myfirstvue
  • myfirstvue为自定义的项目名
  • 项目会根据你cmd当前路径,如有需要请自行更换

【4】选择预设项目

image-20240428211636902

可以使用默认配置,但这里我选择自行创建Manually select features

【5】选择自带配置

image-20240428211815658

空格是勾选,回车确认

这里使用的是vue2因此选2.x

image-20240428211903901

【6】确认

image-20240428211945122

【7】完成并创建依赖包

image-20240428211957008

如果想要保存该配置可以在这里选y然后为配置命名

image-20240428212216300

创建Vue项目

完成以上配置后便可以再次在终端输入vue create myvuepjt创建项目

然后会在该路径下生成一个文件夹,直接用webstorm打开

image-20240428212659170

  • 打开项目之后更改启动配置

image-20240428214949562

  • 添加新的npm配置

image-20240428215026236

  • 脚本选择server

image-20240428215050206

  • 等待环境搭建

image-20240428215122127

  • 搭建成功进入Local路由

image-20240428215152111

  • 出现该页面则表示已经完成了项目的搭建

image-20240428215225680


http://www.ppmy.cn/server/23035.html

相关文章

深度学习基础之《TensorFlow框架(16)—神经网络案例》

一、mnist手写数字识别 1、数据集介绍 mnist数据集是一个经典的数据集,其中包括70000个样本,包括60000个训练样本和10000个测试样本 2、下载地址:http://yann.lecun.com/exdb/mnist/ 3、文件说明 train-images-idx3-ubyte.gz: training s…

零售数据分析方案:深度剖析人、货、场

人,即会员分析、用户分析,通过分析获得直观的用户画像,了解目标用户群体的消费水平、喜好、频率,为销售营销决策提供必要的数据支持;货,即商品分析,包括但不限于分析商品结构、分析销售top10商品…

网络编程——TCP

socket socket类型 流式套接字(SOCK_STREAM) TCP 提供了一个面向连接、可靠的数据传输服务,数据无差错、无重复、无丢失、无失序的发送且按发送顺序接收。内设置流量控制,避免数据流淹没慢的接收方。数据被看作是字节流,无长度限制。 数据报…

IDEA中配置使用maven和配置maven的中央仓库

1 以汉化后的IDEA为例配置maven 打开idea选择文件 选择 设置 点击>构建.执行.部署 点击>构建工具 点击>Maven 其中Maven主路径 就是我们maven下载解压后的路径 可以通过边上的三个点选择你解压后的绝对路径,也可以直接把解压后的绝对路劲复制过来 以下…

使用MySQL和SQL Server生成最近七天的日期

在数据处理和报表生成过程中,经常需要生成最近一段时间内的数据。本文将介绍如何在MySQL和SQL Server数据库中使用SQL编写代码来生成最近七天的日期数据。 MySQL示例 在MySQL中,可以使用日期函数和临时表来生成最近七天的日期。以下是一个示例代码&…

2024年一季度金融读报集锦

2024一季度金融读报集锦 20240104202401052024010920240110202401152024011620240117202401182024011920240122202401232024012420240125202401262024012920240130202402012024020220240204202402052024020620240219202402202024022120240222202402232024022620240227202402282…

Java SE入门及基础(50) Java实现LinkedList(单向链表、双向链表) Java实现栈

目录 List 接口 1. 特性描述 List 接口常用方法 2. ArrayList 示例及源码解读 3. LinkedList 示例及源码解读 单向链表 双向链表 4. 栈 练习 Java SE文章参考:Java SE入门及基础知识合集-CSDN博客 List 接口 1. 特性描述 A List is an ordered Collection (sometimes called…

c++17--iota

std::iota 头文件&#xff1a;#include <numeric> std::iota(begin,end,start_num) 用指定起始值初始化指定内存&#xff0c;递增初始化。 #include <iostream> #include <vector> #include <numeric>int main(){std::vector<int> arr(5,0);…