Windows 10 Node.js安装配置及部署Vue.js_win 10 node查看vue 版本-优快云博客

文章目录

环境：Windows 10
Node.js版本：14.17.6（建议用12版本）
Vue：2.9.6（Node.js自带）

很无奈，写这篇文章也是因为找了半天没有几个教程是正常而完整的，几经波折，翻了一些视频和结合各类文档，只好自力更生了。

本教程为初学者基本教程，但是建议下载node.js为12.x版本（14+的版本在打包的时候会有一些warn，我这里教程用的是14，也不是不能解决，但是因为后续发生了其他问题删了一些东西，干脆重装，就重新装了12.2.0的版本），或者下载nvm。

node官网旧版本页：https://nodejs.org/zh-cn/download/releases/
nodejs12：https://nodejs.org/download/release/v12.2.0/

nvm是一个node的版本管理工具，可以在高低node.js版本中切换。nvm和node.js的安装包只需要一个就可以了，教程可以翻到最下面的参考链接。

一、Node.js下载和安装

1）Nodejs：12.2.0（用这个！用这个！用这个！！！1）结束可跳到3）

nodejs12：https://nodejs.org/download/release/v12.2.0/

下载x64位的msi即可：
在这里插入图片描述

2）Nodejs：最新版本（目前是14，不建议用这个，但是已经写了就区分一下，可跳到3）

下载地址：https://nodejs.org/en/download/
Windows上选择msi即可。

3）安装过程

安装Node.js时，除了修改一下安装路径和勾选复选框之外，没有其他需要注意的了。在结束时会打开powershell安装，有红色字样也可以先不用管它。

我这里安装路径为：D:\nodejs。
在这里插入图片描述
结束后会弹出cmd，按提示一直按键，回车就行：

一直继续跳到powershell，就一直安装，一直到最后提示退出就结束了，需要安装的东西还挺多的，所以这个过程需要一点时间，如图，其中有两个库提示需要重启电脑：
在这里插入图片描述

重启电脑后，打开cmd测试node.js是否安装成功，分别输入以下两条命令即查看版本信息，若正常返回版本号则说明安装正常：

# 查看node版本
node -v
# 查看npm版本
npm -v

二、环境配置

1）配置npm的全局模块和cache的存放路径

后面设置淘宝镜像后，换成了cnpm，也要对cnpm设置一次。

由于默认情况下，全局安装会安装到C:\Users\用户名\AppData\Roaming\npm目录下，而我们不想放在C盘，而是放在刚刚安装的nodejs目录D:\nodejs下，注意引号前有空格：

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

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

注意：为了省去麻烦，建议从这里开始，如果使用cmd要用管理员打开，否则后面npm install的时候会没有权限（包括git bash），这里不影响。

在这里插入图片描述

命令执行完会生成对应目录，先创建再执行命令也可以。

在这里插入图片描述

2）配置windows环境变量

1、打开：“计算机”右键——“属性”——“高级系统设置”——“高级”——“环境变量”，环境变量分为两块，上面是【用户变量】，下面是【系统变量】；

2、在下方【系统变量】里新建一个变量名为NODE_PATH的变量，由于全局安装设置到node_global目录下后，会在其下产生一个node_module目录，因此值应为node_global下面的node_module目录：

D:\nodejs\node_global\node_modules\

** * 这个地方很重要，如果写错了，在node命令行中测试就会提示no module **
在这里插入图片描述
创建完后，把这个NODE_PATH追加到【系统变量】的【Path】里去：

%NODE_PATH%

3、修改【用户变量】【Path】，安装完node.js之后，这个地方会有一个C:\Users\【你的用户名】\AppData\Roaming\npm的值，前面提过就是原本的全局安装默认安装的位置，需要把它改为node_global目录：

D:\nodejs\node_global\

如果电脑上只有C盘，或者就是想装在C盘下，可以用默认的就行。

4、此时就可以安装express进行测试了（cmd需要管理员权限）：

# 安装
npm install express -g

在这里插入图片描述

安装目录为：D:\nodejs\node_global\node_modules\，可以进入该目录查看是否有express目录。
在这里插入图片描述

5、在cmd中输入并进入node，测试express是否可以正常使用，如果是以下场景说明安装成功了，失败了就是no module：
在这里插入图片描述

三、安装淘宝镜像

npm是国外的，所以会比较慢，国内一般使用淘宝的cnpm镜像，然后通过它来安装vue，cnpm命令管理工具可以代替默认的npm管理工具，安装语法为cnpm install xxx [-g]。

输入以下命令并通过cnpm -v查看安装是否成功，可以：

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

在这里插入图片描述

安装时出现紫色的提示不要紧，这里是说某些库已经被摒弃了，不影响。

另外，建议查看并设置一下npm和cnpm默认源，yarn、npm和cnpm可以通过这条命令set方式切换，如果不设置cnpm也为淘宝镜像，默认是https://registry.nlark.com/

> npm config set registry http://registry.npm.taobao.org/
> cnpm config set registry http://registry.npm.taobao.org/

在这里插入图片描述

四、安装webpack、webpack-cli和vue-cli

vue是自带的，不用再安装。安装顺序为webpack、webpack-cli、vue-cli。
在这里插入图片描述

如果是重装nodejs后，或者node_cache等目录没有安装在C盘默认目录下，在查看npm list时，可能会报错npm ERR! extraneous:，执行npm config set cache/prefix相关命令后，再执行npm init -y即可，再查看list就没有报错了。

1、安装webpack

cnpm install webpack -g

在这里插入图片描述
2、安装webpack-cli

cnpm install webpack-cli -g

在这里插入图片描述
3、安装vue-cli
如果vue是3.0+，那把vue-cli换成@vue/cli

cnpm install vue-cli -g

在这里插入图片描述
安装成功时查看版本号如下，vue的查看方式是大V。

安装基本完成，后面是搭建Vue了。

五、搭建vue项目init

以下是本地搭建及运行项目的全部命令，后面详细讲解每条：

# 进入其他盘，如D盘，如果是cmd是输入d:后回车
cd d:
# 初始化一个vue项目，项目不能有大写字母
vue init webpack vueproj
# 进入项目目录
cd vueproj

# 只有package.json变化，或者第一次init时需要执行，否则可以跳过该步；
# 可以使用npm的使用npm，配置了taobao镜像的用cnpm
cnpm install
# 运行
cnpm run  dev

1）使用vue-cli创建项目

这里说一下，初始化的时候不建议使用cmd或powershell，最好用git bash。cmd会卡住，git 也不一定，因为有的时候是网络或者其他的问题，但是起码超时会结束。我这里cmd显示在下载template就卡住了，git 超时结束。

如果没有这样的问题，可以跳过2），直接进入3）运行
在这里插入图片描述

2）离线下载templates并init（可跳过）

解决办法是：下载离线文件安装，下载master分支的zip就可以，github也可以在releases拿最上面那个。

下载后，解决步骤：
1、进入C:\Users\【用户名】，这里的用户名要看你是不是Administrator用户，如果是则进入Administrator目录，否则进入对应用户名目录。如果用户目录下一个以“.”开头的文件名都没有，你先看一下隐藏的项目有没有被勾选，没有则勾选；如果还是没有那你可能进错目录了。
在这里插入图片描述
2、看该目录下有没有一个叫.vue-templates的目录，没有的话需要通过cmd创建，以点开头的名字是无法直接右键创建的，lenovo是我的用户名。

3、将离线下载的webpack-master.zip解压到.vue-templates目录，但是解压后要把目录名字改为webpack，否则会找不到目录。

在这里插入图片描述

4、下载后原来的git bash窗口要关掉重新打开，比如进入d目录，右键git bash here，输入命令，其中vue-proj是我的项目名，–offline表离线安装，会自动使用.vue-templates目录下的template来生成项目：

vue init webpack vue-proj --offline

在这里插入图片描述
除了最后一项，其他都默认就行，都是一些项目啊，作者啊，是否需要测试项，代码风格之类的设置。最后一个是问是否使用npm作为默认，可以选择的有npm、yarn和
自己选择。前面我们提过npm慢，所以更换了taobao源，因此这里用上下键选No回车。
在这里插入图片描述
此时正常的init成功

可以看到目录，生成的目录说明可以看这篇文章的图片，这里不再赘述：

六、本地运行

如图，可以看到刚刚init命令最后的这部分，是我们要运行所要执行的操作，一般第三步的lint可以省略。

在这里插入图片描述
由于是刚刚创建的项目，所以需要执行npm install（不过我们这里npm都要使用cnpm），后续如果没有模块更新则可以省略第二步，就是说后续最简单只要进入项目目录，然后npm run dev即可。

如果报以下错，说明你的cmd没有以管理员身份打开，重新以管理员身份打开cmd后再执行就好了。如果还是报这个错，而且确认检查过cnpm和npm（也就是你使用的是哪个，就检查下它是不是国内的taobao源），可以尝试删除C:\Users{用户}\下的.npmrc文件试试：
在这里插入图片描述

由于项目下都有一个package.json文件，它定义了每个项目所需要的各种模块依赖（主要是dependencies和devDependencies部分，前者是生产环境依赖，后者是开发环境依赖，），以及项目的配置或元数据。执行npm install 命令时，根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

在这里插入图片描述
如果npm install后面指定了某个模块，则只安装此模块。如果没有指定，则按照package.json定义安装，执行后会在项目目录下生成一个node_modules目录，存放本项目依赖。

每次修改了package.json文件内的内容，需要执行cnpm install [--save-dev]进行更新。--save-dev选项表示自动把模块和版本号添加到模块配置文件package.json中的依赖里【devDependencies】部分，这块是开发环境依赖；另外还有--save参数，是添加到【dependencies】部分，是生产环境依赖。
在这里插入图片描述
关于package.json这个文件的说明，可以参考链接：https://blog.youkuaiyun.com/qq_42815050/article/details/113926665

在这里插入图片描述

默认端口为8080，启动后，浏览器访问http://127.0.0.1:8080/或http://localhost:8080/都可以，这个是本地默认的界面，表示成功了。

在这里插入图片描述
如果端口被占用，或想使用其他端口，通过修改项目下的config目录下的index.js文件，找到【dev】部分下的 port，修改后重新执行cnpm run dev

另外值得注意的是，目前访问页面正常是还没进行打包。当你进行打包调试时，由于打包之后的js和css路径会变化，需要修改刚刚index.js文件里【build】部分的assetsPublicPath为’./’，默认是’/’，如果不改，本地是无法找到对应文件，界面无法正确加载。
在这里插入图片描述