node详细安装教程以及Vue脚手架搭建过程记录

第一章、node详细安装教程

node官方文档：API 文档 | Node.js 中文网

node下载官网：下载 | Node.js 中文网

1、进入node官网下载安装包

下载好后，进入自己的下载文件夹管理：

2、安装

•  打开.msi文件，一直下一步即可：

•  选择安装位置，我这里装在D盘下新建的nodejs文件夹下：

•  这里直接下一步：

       -- node.js runtime：node运行环境
        -- orepack manager：npm 包管理
        -- Online documentation shortcuts：在线文件快捷方式
        -- Add to Path：添加路径
        -- corepack manager：核心包管理

•  这里不用勾，之后需要什么包直接npm下就好

•  最后等待下载完成，点击finish即可
• 下载完成后查看一下，然后留意一下nodejs所在的目录

•  上面安装过程中已自动配置了环境变量和安装好了npm包

• 此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：

3、配置npm在安装全局模块时的路径和缓存cache的路径

• 配置环境时一定要留意自己的nodejs的根目录路径。
•  在执行，例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示：

• 这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：（路径看nodejs安装路径，我安装的根路径是：D:\nodejs）

npm config set prefix "D:\nodejs\node_global" 
npm config set cache "D:\nodejs\node_cache"

• 执行成功后，然后再此电脑 -> 右键属性 -> 高级系统设置 -> 环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“D:\nodejs\node_modules”，如下图：

•  最后编辑用户变量里的Path，将其中默认的C:\Users\用户名\AppData\Roaming\npm更改为D:\nodejs\node_global下图：

第二章、首次Vue脚手架搭建

1、配置npm国内淘宝镜像

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

2、具体步骤

• 全局安装@vue/cli (首次使用)

npm install -g @vue/cli

        -- 过程中如果有卡顿，按回车继续即可。 

        -- 安装完成之后重启，输入vue,如下图说明安装成功。

• 切换到想要创建的目录，让后使用命令创建（使用自定义创建）

        -- 切换到想要创建的目录，使用命令 vue create 项目名

         -- 选择最后一项自定义配置项

        -- 进入，空格选择or不选择

         -- 使用vue2.x

         -- 不使用history模式，使用hash（哈希）模式

         -- 选择自己用的习惯的Css预处理器

         -- 代码格式校验使用ESLint + Standard config

         -- 校验代码格式都选：第一种修改保存文件时，第二种执行提交代码时 

         -- 生成配置信息：保存到独立文件中（选它）；保存到package.json文件中

        -- 是否保存之前的选项，方便下一下直接选（可Y可N）

         -- 综上

        -- 配置成功

• 启动项目

进入项目 --> ctrl+~ 打开控制台 -->npm run serve,执行浏览器显示该页面，项目完全创建好了！！

总结 

到此这篇关于node详细安装教程以及Vue脚手架搭建过程的文章就介绍到这了,更多相关node安装及Vue脚手架搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论