首页 前端知识 nodejs及vue的安装与配置~小白教程!

nodejs及vue的安装与配置~小白教程!

2024-03-04 10:03:33 前端知识 前端哥 565 324 我要收藏

目录

一、nodejs的下载和安装

 二、创建全局安装目录和缓存日志目录

三、配置环境变量

四、安装 Vue

1、安装 vue.js

 2、安装webpack模板

 3、安装 vue-cli 脚手架

4、安装 vue-router

 五、创建 vue 项目


一、nodejs的下载和安装

下载地址:Node.js (nodejs.org)

可以直接点击对应版本进行下载,也可点击菜单栏中的下载进行对应版本,一般选择长期维护版较好。下载完成后双击进行安装:

 点击next进入下一步:

 勾选“同意”,点击next,进入下一步:

 点击change可以改变安装路径,由于我的电脑只有一个盘,所以此处选择默认路径。

 直接next。

 不勾选!!!直接next。

 直接Install就好:

 finish完成!

检查是否安装成功:

node -v

 npm -v

 出现版本号即安装成功!

安装成功后的完整目录:

 二、创建全局安装目录和缓存日志目录

在nodejs的安装目录下分别创建node_global文件夹和node_cache文件夹。

打开命令提示符,将npm的全局模块目录和缓存目录配置到我们刚才创建的两个文件夹目录下:

npm config set prefix "安装目录\node_global" 

npm config set cache "安装目录\node_cache" 

如果懒得手敲安装路径,可以直接去对应的文件夹目录下复制粘贴安装路径 ,如下:

 执行上面两行命令:

 此处修改源为淘宝镜像,后续就不需要再安装cnpm了。

npm config set registry https://registry.npm.taobao.org

输入以下命令,可查看npm配置修改是否成功

npm config list 

 这时路径 C:\Users\用户名\ 下会多出一个 .npmrc 文件,用记事本打开就可以看到我们上面修改的信息。

三、配置环境变量

安装过程中,系统会自动配置两个环境变量,一个在环境变量-->用户变量-->Path中(C:\User\用户名\AppData\Roaming\npm),另一个在环境变量-->系统变量-->Path中。

环境变量

方法一:电脑设置-->主页的“关于”-->页面右侧的“高级系统设置”

方法二:此电脑-->系统属性-->高级系统设置

注意:在设置环境变量后,一定要点击“确定”,每个对话框都要点“确定”才可设置成功!!!要验证环境变量是否设置成功,只需退出重新进入查看是否有修改后的路径信息即可。

“环境变量”修改环境变量:

 将 C:\User\用户名\AppData\Roaming\npm 修改为 你的安装路径\node_global

 路径修改后就是上图中的路径信息,编辑后一定要点“确定”退出!

环境变量-->系统变量-->新建

注意:此时 node_modules文件夹还未生成,但是等我们把模块安装到全局目录下面时,系统会自动生成该文件夹。

 添加后在 系统变量-->Path 中添加 %NODE_PATH%

 全部点击“确定”退出

四、安装 Vue

1、安装 vue.js

管理员身份运行命令提示符,否则可能会因没有权限而报错( win+s 搜索命令提示符,右键以管理员身份运行即可 )

npm install vue -g

ps:-g 指的是全局安装,即安装到 node_global 全局目录下。

 2、安装webpack模板

npm install webpack -g

 由于 webpack 4x以上webpack将命令相关的内容放在了 webpack-cli 中,故需要安装 webpack-cli

 npm install webpack-cli -g

 要验证是否安装成功,输入 webpack -v 能输出版本号就表示安装成功!

如果不显示版本号,显示不是内部指令,关闭 cmd 重新打开即可!

如果和小编一样输出了一堆系统信息的也可以。(虽然不太清楚具体原因,但是我试了一下不影响后续安装配置)

 3、安装 vue-cli 脚手架

npm install -g @vue/cli     (3.0版本) ---选这个!!!

npm install vue-cli -g      (2.0版本)

 vue -v 验证

vue -V 验证 

 安装成功!

4、安装 vue-router

npm install vue-router -g

 这时打开全局模块目录下的 node_modules 文件夹就可以看到我们安装的配置都在这里。

 五、创建 vue 项目

最好在其它盘里建一个文件夹来存放所创建的 vue 项目,由于小编只有一个C盘,所以我直接在 nodejs 文件下创建了一个 Data 文件夹来存放我创建的项目。

要将项目存放在想要存放的位置下,直接在该位置路径下输入 cmd 。此时有很大机率会出现权限问题,所以我们要么以管理员身份运行 cmd 窗口,在该窗口下切换路径,要么设置存放项目的文件夹属性。这里我以第二种为例进行说明,进入 Data 文件夹中,右键-->属性

 属性-->安全-->User-->编辑

 选 User-->勾选完全控制,然后确定

 退出过程中,一直点“确定”方可设置成功。在想要存放项目的文件目录中输入 cmd 回车即可

 创建 vue 项目

vue create vue_test    ( vue_test 为项目名)

 上下方向键可调整选项,回车进入下一步,此处选手动设置

 空格表示选中

回车创建

直接回车选择3.X

输入n回车

选择 dart-sass 直接回车

选择当前第一个选择,直接回车

 回车下一步

下一步

 输入 n 回车

vue_test 项目创建成功!接着按照蓝色提示字体先后输入 “cd vue_test” 和 “npm run serve” 

复制 Local 后的网址在浏览器中打开 ,项目创建成功!

 

 

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3213.html
标签
npmwebpack
评论
发布的文章

Jquery提供的load方法

2024-03-26 08:03:18

echarts:去掉markLine

2024-03-26 08:03:08

jQuery总结

2024-03-11 10:03:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!