从零开始搭建VUE项目

本文详细介绍如何使用Node.js和Vue脚手架工具创建并初始化Vue项目,包括环境配置、项目创建及本地运行等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、node.js的下载安装

介绍:vue项目运行的一个环境

下载:https://nodejs.org/en/download/

测试:npm -v

成功标志:

二、VUE学习【实战】

(1)新建步骤:

1 .打开idea,新建项目
Create New Project > Static Web>填写project name和选择保存的工作空间>Finish

 

 

2.安装vue脚手架工具

  • 首先安装npm的淘宝镜像(下载速度比较快),打开idea的Terminal

     

     

    输入以下的命令

npm i -g cnpm --registry=https://registry.npm.taobao.org

  • 等待下载完成以后,继续安装vue的脚手架工具,在Terminal内继续输入以下命令
  • 这里注意是-V,大写大写

测试是否安装成功:
vue -V

  • 脚手架安装完成后,初始化包结构,继续输入

vue init webpack demo

  • demo为你前面新建的项目名。初始化会进行设置。可参考此处设置。

  • 初始化完成后。依次在Terminal输入图片内的黄色文字

     

  • 完成后,会提示在哪个端口可以访问,此处现在是8080

  • 打开浏览器输入:localhost:8081,出现以下画面,简单的demo就搭建完成了 。

到此,一个VUE项目就新建结束了。

此时,项目的目录为:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值