安装配置vue脚手架

注意：五、六、七三步骤可以用可视化窗口完成，必须按照vue 3.0以上版本。

脚手架的背景：

脚手架这个词在编程领域初次看到是在使用前端框架时。许多团队在制定前端工程方案时会加入脚手架模块。虽然不同的团队对工程化的理解和实施有所差异，但是对于脚手架的定位基本是一致的：创建项目初始文件。这是一条看起来十分简单地准则，但是对于这条准则应该如何理解，如何实施却并不是一件很简单地事情。

在探索这条准则的深度之前，我们不妨看看类似的一些成熟方案，比如Eclipse。这个大名鼎鼎的IDE软件被很多Java和Android开发者使用。通过Eclipse创建一个新项目时，它提供了丰富的配置项，这些配置项可以归纳简化为以下流程：选择项目类型 -> 选择项目目录 -> 配置项目细节 -> 最终确认 -> 完成。这是脚手架最基本也是必须具备的流程。

 

什么是脚手架？

在计算中使用的脚手架指的是两种技术之一：

第一种是与某些MVC 框架中的数据库访问相关的代码生成技术;

第二种是由各种工具支持的项目生成技术。

由此，我们明确了脚手架的定义：脚手架作用是创建项目的初始文件，本质是方案的封装。

脚手架是一种由一些 model–view–controller 框架支持的技术，程序员可以在其中指定应用程序数据库的使用方式。该编译器或框架使用说明书中，与预先定义的代码模板在一起，产生最终代码的应用程序可以使用它来创建，读取，更新和删除数据库条目，有效治疗模板作为“支架”上建立更强大的应用程序。

单独来看，脚手架可能并不具备很高的“性价比”，但如果你的团队有一套完整的前端工程体系，脚手架的作用就会被放大。前端工程体系的功能涵盖范围广，封装的方案类型多，对应的配置项也非常复杂。而且，大多数前端工程体系的开发者并不是一线的业务开发者。对于业务开发者来说，这套工程体系就是一个黑盒，他们不需要了解其中的复杂原理，只需要知道如何配置即可。所以业务开发者的需求就是快速开发快速配置，并且生成的配置项跟项目要对应，既要满足项目的功能需求，又不能有“混淆视听”的冗余功能。

前端工程体系不是Vue、React这种开发框架，工程体系只是一种“服务”，是辅助性质的。学习曲线应该平缓，即使文档再清晰易懂，也不应该要求业务开发者去花时间学习各种细节。这就是脚手架要解决的切实问题，简单说就是：

快速生成配置：

1、降低框架学习成本。

2、随着前端工程体系越来越复杂，脚手架的角色会越来越重要。

CLI是Command-Line Interface（命令行界面）俗称脚手架。

Vue CLI使用的前提Node.js、webpack（npm install webpack -g全局安装）。

一、安装nodejs

1.1登录网址Node.js。

如图，下载16.13.0长期维护版（推荐给绝大部分用户使用的）。

1.2安装nodejs

 

可以使用默认路径，本例子中自行修改为“d:\nodejs”。

 

点击【next】安装。

 

点击【Finish】完成

 

查看目录是否有以下的文件。

 

1.3配置npm

点击【win+R】键，打开运行窗口，输入控制命令行程序（cmd）,检查是否正常。

 

输入“echo %path%”,查看path属性。

注：echo是计算机命令，功能显示文字。

 

输入“node -v”命令，查看nodejs版本号。

 

输入命令“npm -v”，查看npm版本号。

注意：虽然node自带npm，但不一定是最新版本的。

 

再看看另外2个目录，npm的本地仓库默认在系统盘C盘的用户目录(注意：第一次没有npm-cache，因为没有用过，使用缓存目录就自动生成)，把这2个目录移动回到D:\nodejs。

 

如下图建立2个目录，即建立相应两个空文件夹。

 

然后运行以下2条命令：

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

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

 

注意：npm config set prefix “D:\nodejs\node_global” //设置全局包目录

npm config set cache “D:\nodejs\node_cache” //设置缓存目录

再来关注一下npm的本地仓库，输入命令：npm list -global，目录已经改变。

 

1.4设置淘宝镜像源

输入命令：npm config set registry=https://registry.npm.taobao.org ，配置淘宝镜像站，提高下载速度。

 

注意：要配置为https，如果是http，最高只能安装vue脚手架版本：2.9.6，而vue3.0以上才支持可视化窗口操作。

输入命令：npm config list，检查镜像配置是否生效，显示所有配置信息

 

关注一个配置文件（注：ghl是操作系统windows用户名）。

配置文件路径：C:\Users\ghl\.npmrc。

 

使用文本编辑器编辑它，可以看到刚才的配置信息。

 

1.5检查镜像

1.5.1检查一下镜像网站行不行，命令1

输入命令：npm config get registry，检查镜像站行不行。

 

1.5.2检查一下镜像网站行不行，命令2

输入命令：npm info vue，测试获取vue的模块信息（注：必须以系统管理员进入命令窗口）

 

1.6更新npm

输入命令：npm install npm -g 安装或更新npm。（如果你的是最新版本的npm，本步骤忽略。）

其中，“npm install”是安装或更新命令，“npm” (第二个)是模块名字，“-g”这个参数意思是装到global目录下，即上面设置的“d:\nodejs\node_global”。

 

输入命令“npm -v”，查看npm版本。

可以看出，npm模块升级了。

 

1.7查看global模块内容

输入命令：npm list -global，查看global里什么模块。

 

注意：默认的模块D:\nodejs\node_modules目录，将会改变为D:\nodejs\node_global\node_modules目录。

如果直接运行npm install等命令会报错，需要做1件事情：设置node_path环境变量：D:\nodejs\node_global\node_modules。

 

（注意：必须需要重新打开CMD让上面的环境变量生效）。

二、测试npm安装vue.js

输入命令：npm install vue -g，这里的-g是指安装到global全局目录去，作为全局变量，在任何地方都可以调用。

 

 

三、测试npm安装vue-router

输入命令：npm install vue-router -g

 

 

四、安装vue脚手架

安装cli3命令：npm install -g @vue/cli

-g就是全局安装（global）

注意：此时安装的是最新版本。

注：强制安装命令：npm install -g @vue/cli –force ,如果以前安装过强制覆盖。

 

安装指定版本：命令:npm install @vue/cli@4.5.13 -g

安装cli2命令：npm install vue-cli -g。（仅仅参考，本次我们只安装3.0以上版本）

输入命令：vue，如下图。

注意：因为vue脚本在自定义的global目录下，不在path环境变量中，所以需要配置path环境变量。

 

path环境变量添加：D:\nodejs\node_global

注意：win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】

 

 

 

重新打开cmd，并且测试vue是否使用正常

注意：必须关闭cmd窗口，再重新打开cmd命令窗口，使设置生效。

 

五、初始化项目

切换到D盘，并且保证为根目录。

 

cli3以上版本命令：vue create vue01

语法：vue create 项目名称

 

cli2命令：vue init webpack vue01（仅供参考，本次用版本3.0以上版本）

注意：该命令在根目录完成。

注意：vue-cli工具是内置了模板包括 webpack 和 webpack-simple，前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。

 

六、暂时运行项目

6.1cli2脚手架（仅供参考，本次不用）

输入命令：cd vue01，进入vue01目录。

输入命令：npm run serve

 

打开浏览器，在地址栏输入：http://localhost:8080

 

6.2cli3脚手架

输入命令：cd vue01，进入vue01目录。

输入命令：npm install -g，初始化，安装依赖。

 

输入命令：npm run dev，运行dev。

 

打开浏览器，在地址栏输入：http://localhost:8080

 

七、编译构建项目

关闭cmd命令窗口，以管理员身份重新进入cmd窗口，进入项目所在目录。

输入命令：npm run build

 

生成静态文件，打开dist文件夹下新生成的index.html文件。

 

八、升级Vue脚手架

8.1查看vue脚手架版本

输入命令：vue -V

注意：V为大写。

 

8.2卸载旧版本vue脚手架

卸载旧版本vue脚手架（3.0版本以下）命令如下：

npm uninstall vue -cli -g

卸载旧版本vue脚手架（3.0版本以上）命令如下：

npm uninstall -g @vue/cli

8.3 安装指定版本vue脚手架

安装指定版本：npm install @vue/cli@版本号 -g

这里我们采用vue cli 4的版本4.5.13

命令：npm install @vue/cli@4.5.13 -g

 

如果出现“文件已存在”错误，采取强制覆盖命令：

npm install @vue/cli@4.5.13 -g –force

 

通过命令：vue -V，新版本安装成功。

 

进入Vue01目录，输入命令：npm run dev，运行dev。

 

在浏览器地址栏输入：http://localhost:8080

 

九、打开Vue项目可视化界面

输入命令：vue ui。（注意：vue脚手架 3.0以上才有可视化界面）

 

vue界面可视化界面要求vue脚手架在3.0以上。

 

十、问题及解决方法

1.vue搭建脚手架，出现问题Command vue init requires a global addon to be installed.

使用vue init webpack my-App 创建项目回车时显示

Command vue init requires a global addon to be installed.

Please run yarn global add @vue/cli-init and try again.

 

解决方法：npm install -g @vue/cli-init

参考网址：https://blog.csdn.net/qq_42429367/article/details/105616392