VUE搭建阿里镜像脚手架（包括nodejs安装教程）

VUE搭建阿里镜像脚手架

本文从安装node.js开始，逐步搭建vue基于阿里镜像的脚手架，并进行简短的校验和开发，后续会有简单的项目搭建和调试。

一、node.js

1.在搭建VUE脚手架前为什么要先安装和了解node.js？

Vue脚手架是基于Node.js的，所以在安装Vue脚手架之前需要先安装Node.js。Node.js是一个开源的、跨平台的JavaScript运行环境，可以在服务端运行JavaScript代码。Vue脚手架依赖于Node.js的npm包管理器，通过npm可以方便地安装和管理Vue相关的依赖。因此，安装Node.js是安装Vue脚手架的先决条件。

2.1windows下安装nodejs

2.1.1 查找nodejs安装包

一、百度搜索nodejs，找到node.js的官网，官网地址nodejs官网

二、进入官网点击官网顶部导航栏的DOWNLOAD

三、根据框内提示行，选择对应的32位或64位

四、我下载的是64位的安装包，双击打开。

2.1.2安装包安装步骤

第一步，点击Next，进行下一步。

第二步，点击1（同意）然后点击2（Next），进行下一步。

第三步

第一种：直接点击Next，使用默认安装位置，进行下一步。
第二种：点击Change自定义安装位置，可以点击Change进行选择，也可以直接赋值上方输入框进行位置变更操作，随后点击Next，进行下一步。

第四步，点击Next，进行下一步。

ps:
● Node.js runtime：是一个开源的、跨平台的JavaScript运行时环境，可以在服务器端运行JavaScript代码，使得JavaScript可以用于编写服务器端应用程序。
● Corepack manager：是一个用于管理Node.js模块的工具，可以安装、升级、卸载和列出所有可用的Node.js模块。
● npm package manager：是Node.js的默认包管理器，用于安装、发布和管理Node.js模块的依赖关系。
● Online documentation shortcuts：是一些快捷键或命令，可以在编辑器或终端中快速访问Node.js官方文档，以便更快速地查找和阅读文档。
● Add to path：是将某个程序或工具的路径添加到操作系统的环境变量中，使得该程序或工具可以在任何目录下运行，而不必在特定目录下运行。在Node.js开发中，将Node.js和npm的路径加入到环境变量path中，可以方便地在任何目录下运行Node.js和npm命令。

第五步，点击Next，进行下一步。

第六步 ，点击Install，进行安装的最终步骤。

第七步，点击Finish，完成安装步骤。

2.1.3 全局模块默认安装路径和缓存下载模块默认路径设置

第一步，找到上述第三步的安装路径（C:\Program Files\nodejs），在该路径下新建两个文件夹，以便后续全局模块默认安装路径和缓存下载模块默认路径的设置。

node_global文件夹是Node.js全局安装模块的默认安装路径，当我们使用npm install -g安装一个模块时，该模块将被安装到node_global文件夹中。

node_cache文件夹是Node.js缓存下载模块的默认路径，当我们使用npm install命令下载一个模块时，该模块的压缩包将被下载到node_cache文件夹中，以便下次安装时可以直接使用缓存中的文件，提高安装速度。

第二步，键盘输入Win+R，输入cmd，点击回车或者点击确定，进入命令提示行。

并输入如下命令

npm config set prefix "C:\Program Files\nodejs\node_global"

（用于设置全局安装的包的安装路径，可以将其更改为自定义路径而不是默认路径。）

npm config set cache "C:\Program Files\nodejs\node_cache"

（npm config set cache 命令用于设置npm缓存的路径，可以将其更改为自定义路径而不是默认路径。缓存是在安装包时下载的文件的存储位置，以便在以后的安装中重复使用。）

命令提示符中出现如下样式，代表设置成功。
ps：全程使用英文输入符。
第三步，配置环境变量
我的电脑，右击，点击属性，点击高级系统设置，在高级下，点击环境变量。

一、在系统变量中新增一个环境变量，NODE_PATH。

二、在系统变量的PATH中添加，C:\Program Files\nodejs\（nodejs安装地址），本例子的windows系统为WIN8

2.1.4 验证安装是否成功

Win+R输入cmd，点击确定按钮或直接键盘敲击回车，弹出命令提示框。
一、验证版本
（1）输入

node -v

（2）输入

npm -v

二、验证npm功能是否可以正常使用，输入如下命令。

npm install -g npm

（“npm install -g npm” 是用于全局安装 npm 包管理器的命令。它的作用是更新或升级 npm 包管理器本身，以便使用最新版本的 npm 包管理器来安装、管理和发布 JavaScript 包。这个命令通常在需要更新 npm 包管理器时使用。）

出现如图所示的命令提示，代表操作成功。

2.1.5 异常处理

一、通用异常处理，确定当前cmd的使用是管理员权限。
二、出现 errno:-4048，在命令提示符中输入如下命令：
（1）清楚npm缓存

npm cache clean --force

（这个命令会删除整个npm缓存目录，包括所有模块和包。这通常用于解决npm安装和更新包时出现的问题，特别是在本地开发环境中使用时。）
（2）验证npm缓存是否有效

npm cache verify

（这个命令会检查npm缓存目录中的所有内容，并删除任何已损坏或过期的缓存。这可以帮助保持npm缓存的健康状态，并确保在安装和更新包时不会出现任何问题。）

二、淘宝镜像

1、指定淘宝镜像

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

（这个指令安装了cnpm，它是npm的一个国内镜像，可以加快npm安装速度。–registry参数指定了npm的镜像源为淘宝的镜像。）

关键一步：显示上述为安装成功，此时需要配置环境变量，因为我们已经指定镜像路径为C:\Program Files\nodejs\node_global，所以需要在该路径下查看是否存在如下图所示的文件存在。

如果存在执行下述操作。（如果不存在，则重新指定镜像路径，并重新输入镜像命令）

在箭头指示处，输入cmd，随后点击确定或者键盘直接敲入回车，输入如下命令。

cnpm -v

出现如下图所示的页面，代表cnpm即淘宝镜像安装成功。

此时将镜像路径（C:\Program Files\nodejs\node_global），整理到系统环境变量的PATH中，然后关闭所有命令提示符窗口，重新打开一个新的命令提示符窗口，输入cnpm -v出现和上图相似的命令，代表淘宝镜像cnpm安装成功。

2、安装命令行工具

cnpm install -g @vue/cli

（这个指令使用cnpm来安装Vue.js的命令行工具。@vue/cli是Vue.js的官方命令行工具，它可以帮助开发人员快速创建、开发和部署Vue.js应用程序。）
注：此处如果报错，简单的解决方案，使用管理员运行命令提示符
出现如下图所示的命令，代表安装成功。

如何验证vue-cli是否安装成功，需要在命令提示符中输入

vue -V

出现如下图所示的命令，代表成功。

三、搭建测试项目

1、搭建前的方式选取

搭建Vue环境主要有以下几种方式：

1. 使用CDN引入Vue：在HTML文件中通过CDN链接引入Vue的js文件，可以快速搭建Vue环境，但是无法进行本地开发和调试。

2. 使用Vue CLI脚手架：Vue CLI是官方提供的脚手架工具，可以快速搭建Vue项目的基础结构，并提供开发、调试和打包等一系列功能。

3. 使用Vue官方提供的Starter Kit：Starter Kit是Vue提供的一个简单的起始模板，可以通过下载并安装来搭建Vue环境。

4. 使用Webpack打包工具：Webpack是一个强大的打包工具，可以将Vue项目打包成一个或多个文件，方便部署和使用。

5. 使用Vue.js Devtools插件：Vue.js Devtools是一款浏览器插件，可以帮助开发者在浏览器中调试Vue应用程序。

总体来说，使用Vue CLI脚手架是最为推荐的方式，因为它可以快速搭建Vue项目的基础结构，并提供了完整的开发、调试和打包等一系列功能。但是对于一些简单的应用程序，使用CDN引入Vue也是一个不错的选择。本文将使用Vue CLI脚手架来搭建测试项目。

2、使用Vue CLI脚手架搭建

2.1 创建项目

第一步，在目录层级打开命令提示符开始创建项目。

第二步，使用vue create vueclidemo指令创建vue项目。

vue create vueclidemo

●第一次安装会出现选择镜像地址的选择，直接输入Y然后回车。
●如果选择过了，输入命令后会出现如下命令提示。

这里可以直接按方向键选择，这里我们选择Manually select features，手动选择创建项目，选择后回车。

第三步，自定义配置创建项目。

第二步回车后会出现如下图所示的命令界面：

根据下面的详细描述可以按方向键下移，然后点击空格进行选择（再次点击空格是取消），选择好后直接敲击回车进入下一步。本文仅搭建demo，所以直接敲击回车使用默认选择好的Babel和Linter/Formatter。

● Babel：Babel是一个转换工具，用于将使用ECMAScript 6（ES6）及以上版本的代码转换为向后兼容的代码。这样，您就可以使用新的语言功能，而不会影响其在旧浏览器中的可读性和可执行性。
● TypeScript：TypeScript是一种开源的JavaScript框架，它添加了静态类型检查到JavaScript。通过在代码中添加类型注释，TypeScript可以在编译阶段捕获错误，从而提高代码质量和可维护性。
● PWA（Progressive Web Apps）：PWA是一种使用Web技术构建的应用程序，可以在各种设备上运行，甚至可以在不安装应用程序的情况下运行。PWA具有原生应用程序的外观和感觉，但使用Web技术构建。
● Router：Vue Router是Vue的官方路由实现，它可以帮助您在单页面Web应用程序中实现路由。
● Vuex：Vuex是一个状态管理库，它为Vue提供了集中式状态管理。Vuex基于Redux实现，并针对Vue进行了优化。
Css：Css是一种用于描述网页样式的语言，它可以为Web应用程序提供外观和感觉。Vue通过内联样式和样式组件来支持Css。
● Linter/Formatter是一种代码格式化处理工具，用于检查和自动格式化代码，以确保代码符合一定的规范和标准。它可以帮助您查找并纠正代码的语法、变量使用、代码风格等方面的问题。
● CSS Pre-processors是一种支持CSS预处理的工具，允许您使用一些功能，如Less、Sass等。这些功能可以使得CSS编写更加高效、灵活和易于维护。它们可以帮助您编写更加模块化的代码，使得团队协作更加高效。
● Unit Testing：Unit Testing是一种测试方法，它将代码分解为小的单元进行测试，以确保每个单元都能正常工作。Unit Testing可以帮助您提高代码的质量和可维护性。
●E2E Testin g：E2E Testing（端到端测试）是一种测试方法，它测试整个应用程序的流程是否按照预期进行。E2E Testing可以检测在单元测试中未检测到的错误和问题。

第四步，选择vue版本

第三步敲击回车后，会看到如下图所示的界面：

可以使用方向键进行选择3.x或是2.x，最后敲击回车进行下一步。我选择第一个默认的3.x，进行下一步。

第五步，代码风格配置选择

第四步点击回车后，会出现如下图所示的界面：

我选择默认的第一个，回车，下一步。

● ESLint with error prevention only：这只是使用ESLint进行代码风格检查和错误预防，没有任何特定的代码风格规则配置。
● ESLint + Airbnb config：这是使用ESLint配合Airbnb代码风格指南的配置，它会根据Airbnb的代码风格指南对代码进行检查和错误预防。
● ESLint + Standard config：这是使用ESLint配合Standard代码风格指南的配置，它会根据Standard的代码风格指南对代码进行检查和错误预防。
● ESLint + Prettier：这是使用ESLint配合Prettier代码格式化工具的配置，它会根据Prettier的格式化规则对代码进行自动格式化。

第六步，选择代码检查方式

第五步点击回车后，会出现如下图所示的界面：

默认选择第一个，进入下一步。

● Lint on save是指在保存时进行代码检查，它会实时检测代码规范，并在保存时显示警告或错误。
● Lint and fix on commit则是指在提交代码前进行代码检查，并同时进行修复，即自动修复一些代码问题并在提交前进行检查，以确保代码质量。这两种方式都是为了帮助开发者遵循代码规范，提高代码质量。

第七步，ESLint进行代码风格检查和错误预防时的配置选项

第六步点击回车后，会出现如下图所示的界面：

这里使用方向键下移，选择In package.json点击回车，进行下一步。

● In dedicated config files： 意味着使用单独的配置文件来配置ESLint。通常情况下，会在项目根目录下创建一个.eslintrc.js文件来存放ESLint的配置信息。
● In package.json： 意味着在package.json文件中使用键值对来配置ESLint。在package.json中的scripts字段中，可以使用"lint"等命令来执行ESLint。这种方式比较简洁，但不如使用单独的配置文件灵活。

第八步，预设选择

第七步点击回车后，会出现如下图所示的界面：

这里键盘输入y，然后回车进行下一步。

● Save this as a preset for future projects 是vue中的一项功能，可以将当前配置保存为未来项目的预设。这样，在创建新项目时，可以选择该预设来应用相同的配置。该选项仅在手动配置时可用。

第九步，预设起名

第八步点击回车后，会出现如下图所示的界面：

尽量起一个全英文小写的名字，我输入的是vueclidemo1，点击回车进行下一步。

第十步，项目搭建完成，调试是否搭建成功

第九步点击回车后，会出现如下图所示的界面：

打开本地的vueclidemo文件夹可以看到如下图所示的文件结构：

在命令提示符种，先输入cd vueclidemo，进入vueclidemo文件夹，随后输入npm run serve，出现如下图所示的界面：

cd vueclidemo

npm run serve

代表启动成功。打开浏览器，输入http://localhost:8080，出现如下图所示的界面：

出现如上页面，代表搭建成功。

2. 2 异常处理

（1）创建项目异常，当输入vue create vueCliDemo时报错，如下图所示：

解决方案：使用vue-cli创建项目时，不能包含大写字母