如何运行Vue项目

本文详细介绍了如何安装和配置node.js、npm以及cnpm,用于解决npm安装问题。接着,设置了npm全局模块和缓存路径,并安装了webpack。通过vue-cli创建项目后,讲解了如何使用npmrunserve和npmrunbuild命令来运行和构建前端项目。
摘要由CSDN通过智能技术生成

第一步   先安装 node.js

从node.js官网(https://nodejs.org/zh-cn/download/)下载并进行安装,一直安装到底。

安装完毕之后。“win+R”—>cmd 打开命令输入框,输入命令"node -v",查看node版本。若出现相应的版本号,即代表安装成功。

npm包是集成在node中的,安装了node也就有了npm。输入命令"npm -v",查看npm版本。

c5ed1a634269400f9aea91049f96c0da.bmp

 

 第二步   安装 cnpm

(由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像—cnpm)

输入命令"npm install -g cnpm --registry=http://registry.npm.taobao.org",等待安装。如果一遍没有安装成功就关闭cmd,再重新安装一次。
如下图↓

b0c83198e7ab45a7a523935a711028e6.bmp647b163da97b4bbe819e7e7920b32e69.bmp

第三步  配置npm在安装全局模块时的路径和缓存cache的路径

在安装路径下新建两个文件夹,分别为:node_global和node_cache

86e1a6dca6df4a719c8f33950b9bebed.bmp

第四步  然后在cmd命令下执行如下两个命令:(每个人自己的路径,玛卡习惯下载D盘)

npm config set prefix "D:\node\node_global"

npm config set cache "D:\node\node_cache"

0df08bebf70447e98d4134b72b3f3215.bmp

 第五步   在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“D:\Program Files\nodejs\node_modules,如下图:

87bc990a2e924ded921b7a16b80e0e8c.bmp

 第六步   编辑用户变量里的Path,将相应npm的路径改为:D:\node\node_global,如下: 

 bd5b4026636a47aba895285d669025be.bmp

 第七步  在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效:

0d8b9d8eb0b847d79e9fb22a61d97031.bmp

 第八步  webpack 也已安装成功,执行 npm webpack -v 可以看到所安装webpack的版本号:

 9add5a612d2540ddad351d4e2708633d.bmp

 基本安装已成功,开始运行

前端项目需要在文件夹运行,如下图↓

第一步   在目录行输入cmd

aa23ae0cfb094657b891209e9c1a4d53.bmp

第二步 如下图运行↓    输入命令 npm run 

 32892cf5891542af90b5d466d304aad7.bmp

 其中的serve 和build 为两个基本操作(npm 可以在项目package.json里面自定义脚本命令,自己找一找这个文件,玛卡就不列举了)

  我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来,但是现在我们要把他放到服务器上的话用npm run build命令

c513b0e8eca64c20a28041b5c3db90fc.bmp

第三步  执行npm run serve  开始运行项目的前端部分

 如果你的package.json里面有设置则直接跳转,如果没有则执行完之后输入以下域名↓,到此前端部分已运行,下面的端口号,在文件里可自行设置,默认是8080

d452d4a38d6d4d9a9aacbf5c7172c879.bmp

玛卡的结果如下↓ ,后端在idea也要单独运行哟

 e2d2fe2e37044a6ca677ce50130d5518.bmp

 

 

  • 10
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玛卡巴卡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值