0


如何运行Vue项目

第一步 先安装 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


本文转载自: https://blog.csdn.net/weixin_51538341/article/details/128505974
版权归原作者 玛卡巴卡 所有, 如有侵权,请联系我们删除。

“如何运行Vue项目”的评论:

还没有评论