node.js安装及构建项目详细流程

一. 下载安装：

直接在node.js官网下载LTS稳定版本，并默认选择项傻瓜式进行安装即可 (win7最高支持版本13)。

安装好之后在dos窗口中检查：

                  

 二. 安装好后，创建项目前的步骤

1. 切换淘宝npm库，执行命令：（两者选其一即可）

       方式一：npm config set registry https://registry.npm.taobao.org

       方式二：npm install -g cnpm --registry=https://registry.npm.taobao.org

    之后切记执行命令：npm config list 检查配置是否生效。

 2.安装vue-cli脚手架和客户端
     命令: npm install -g @vue/cli --force       

在执行这个命令时，报了一大丢错（不过输入命令vue ui也可以顺利跳转到浏览器界面），部分显示如下：

        最后把C盘上面画线的文件夹删掉后（C盘那些npm文件夹内容应该是之前卸载的nodejs留下的，之前vue-cli装在C盘），再次执行该命令不再报错了。 

                                                                                                    
    [ vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：
    vue init webpack xxx   (这是命令行的方式--繁琐)  

    注1：xxx 是创建项目的名称

    注2：vue-cli脚手架里含有了vue，可输入命令：vue -version或者vue -V（大写）验证

    注3：必须先安装vue,vue-cli，webpack，node等一些必要的环境 ]

3.输入命令跳转到客户端首页，能成功跳转说明OK了。

三. 使用脚手架vue-cli(2.X版)来构建项目

1.创建项目

说明：如果想要将vue项目创建在 D:\mytest/code 目录下，那我们需要在该目录内地址栏输入cmd打开DOS窗口执行 vue ui命令实现跳转,这时就自动跳转到该目录下了,直接创建即可。

在"功能" 这一步选择了Router和"使用配置文件"；

    “配置”这一步选择了2.0版本和 ESLint+Standard config；其他都保持了默认。

（客户端的方式比命令行的方式更直观）

2.初始化项目

1）安装element ui 插件：直接搜element；

2）安装axios依赖：安装的“运行依赖”

3. 测试

 4.关闭代码校验

 5.用HBuilder打开所建的项目

6.将上面src目录换掉,再次编译时报错如下:

 解决方法：

 1) 通过命令行的方式安装开发依赖 less-loader ：（因为搜索到的依赖版本太高，不兼容）

     具体操作为：在VUE项目的根目录启动执行安装命令：npm install less-loader@5.0.0

  2) 安装开发依赖 less

 到此再运行就成功了。

四. 报错解决（8.10第二次做时补）

 遇到上面的错误，根据提示，将上面的命令在cmd出口运行一下就OK了。

 遇到上面的错误，在cmd窗口中分别运行：npm install --save quill

                                                                     npm install --save vue-quill-editor   就OK了。

五. 报错解决（2022.1.16第三次做时补）

 

 第三次又遇到了上面的错误，按照提示的命令没有解决，然后在下面图示中搜索对应的依赖，安装之后可以了。

 

六. 相关DOS命令

检查nodejs版本和npm版本命令见上： node -v  和  npm -v

更新npm版本命令----最新版本： npm install npm@latest -g

                            ----指定版本： npm -g install npm@6.14.13

查找nodejs安装位置： where node