关键词：

文章目录

• vue-cli脚手架
• • Node.js环境安装
  • vue-cli2的安装
  • • npm，cnpm介绍
    • 安装脚手架
    • 用脚手架生成项目目录
  • vue-cli3的安装
  • • 使用vue-cli3图形界面

vue-cli脚手架

顾名思义，脚手架就是用来协助，配合，帮助构建一个项目的。使用vue-cli仅需5分钟就可以搭建一个完整的Vue.js应用,相较于人工操作，具有安全,高效的特点。

vue-cli与平台无关,功能更加齐全。无论是预编译模板，注入依赖，还是模拟生产环境等功能，vue-cli都具备,而且占用内存少，更高效，运行速度非常快。

Node.js环境安装

要安装Vue.js脚手架，需要依赖Node.js的npm命令，npm是Node.js所衍生的一个命令，因此我们需要安装Node.js

1. 在Node.js官网下载自己计算机的版本

2. 首先点击下载好的Node.js，然后傻瓜式安装点击next即可，需要注意的是，一定要根据自己的磁盘来分配安装地址

3. 这一步建议选中复选框，这样即便安装过程中有需要依赖的如Visual C/C++或类似.NET Framework的安装包，Node也会自动将它们安装好。

vue-cli2的安装

npm，cnpm介绍

vue-cli的安装，需要用到npm或cnpm，在这里先来了解npm和cnpm及它们的区别

npm

npm是Node.js的一个工具，它的主要作用是进行包管理(包括卸载，安装，依赖管理等)

cnpm

由于npm是从国外的服务器下载的，受网络的影响比较大，也可能会出现异常，所以必须使用国内镜像来代替国外的服务器。国内的淘宝镜像则称为cnpm

在进行脚手架配置时，将以cnpm为主，两者的用法完全相同，区别时一个以npm作为命令的开头，另一个以cnpm作为命令的开头

命令参数说明

需要注意的时，npm和cnpm仅是下载的位置不同，除此之外所以的参数，功能和作用都是完全相同的

-S参数：-S是-save的缩写，它表明是将安装包的信息加入生产阶段

-D参数：-D是-save-dev的缩写，所代表的是save和dev这两项的综合，是在开发阶段，所以大多数情况下选择-D

安装脚手架

在安装脚手架之前，我们需要安装cnpm来替换npm（原因在前面已经说了)

cnpm的安装

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

安装vue-cli

输入如下命令安装vue-cli

cnpm install -gD vue-cli

为了验证Vue.js脚手架是否安装成功，输入vue -V命令(注意-V的V是大写的)，如果显示Vue.js版本，就代表Vue.js脚手架安装成功

用脚手架生成项目目录

在资源管理器的C:\\vue-learn\\vuecli2路径下输入cmd进入命令行

使用webpack模板创建项目，projectName是项目名称

vue init webpack projectName

创建后，会有一个交互式的选项让你选择：

安装完成后，还需要安装对应的项目依赖包，由于项目依赖包基本都在国外的服务器，国内需要翻墙才能访问，因此需要把npm的下载源换成国内的

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

cd 到项目目录, 执行命令 npm install 安装对应的项目依赖包

安装好的Vue.js项目依赖包后输入npm run dev即可运行刚刚安装好的Vue.js模板项目

根据提示在浏览器中访问http://localhost:8080就可以打开运行好的Vue.js项目了

vue-cli3的安装

输入以下命令安装vue-cli3

cnpm install -gD @vue/cli

安装好vue-cli3，使用以下命令查看安装是否成功，若成功，则会出现安装版本

vue -V

使用vue-cli3图形界面

输入以下命令，启动图形化的vue-cli3界面

vue ui

单击“创建”按钮，出现如下图的界面，首先在目录路径上输入之前创建好的vue-learn文件夹的路径，然后在此目录下创建vuecli3的文件夹

单击创建好的vuecli3文件夹进入文件夹内，然后单击底部的“+"在此创建新项目按钮

单击右上角的”安装devtools按钮，然后单击"继续"按钮可以安装基于谷歌浏览器的插件(国内需要科学上网才能安装)，方便在调试Vue.js项目过程中进行定点调试

单击“任务”按钮，单击“save”按钮，然后单击“运行"按钮，等待几分钟即可，单击"启动app"按钮就可以在浏览器中打开本次创建的Vue.js项目

单击”build"按钮，进入构建项目页面，然后点击"运行"按钮，等待一会就会生成项目的发布文件

找到项目文件夹目录C:\\vue-learn\\vuecli3\\vuecli3-test，在里面会有一个新的dist文件夹就是发布成功后的文件，直接将这些文件上传到服务器根目录，就可以作为服务器的前端页面文件了

vue-cli2,vue-cli3（vue脚手架）超详细教程(代码片段)

文章目录vue-cli脚手架Node.js环境安装vue-cli2的安装npm，cnpm介绍安装脚手架用脚手架生成项目目录vue-cli3的安装使用vue-cli3图形界面vue-cli脚手架顾名思义，脚手架就是用来协助，配合，帮助构建一个项目的。使用vue-cl... 查看详情

vue脚手架安装步骤vue-cli(代码片段)

...级它：#查看版本$npm-v2.3.0#升级npmcnpminstallnpm-g2.安装vue-cli脚手架构建工具　　　先看下你的电脑有没有安装vue　　　没有就安装 如 查看详情

vue-cli脚手架安装

想快速搭建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要npminstall就可以安装，步骤：1.前提：安装了npm,淘宝NPM镜像等 2.检测是否已经安装vue-cli，执行以下命令　　vue--version  　　若执行不成... 查看详情

vue学习笔记：vue-cli脚手架搭建

一：安装vue-cli脚手架：1：为了确保你的node版本在4.*以上，输入 node-v 查看本机node版本，低于4请更新。2：输入： npminstall-gvue-cli    安装vue-cli脚手架。3：输入： vueinitwebpacksell      查看详情

vue-cli(vue脚手架)安装并创建项目(代码片段)

前言：　　实际项目中经常会用到vue-cli，今天就整理一下他的安装方式。准备工作：　　首先安装node和npm，并且保证node版本是v6及以上，话不多说，上图 　　然后安装vue3，安装方式如下：npminstall-g@vue/cli备注：vue-cli3.x和2.x... 查看详情

vue-cli全集（父子组件传值axios）

文章目录1、课程简介2、vue-cli2脚手架2-1、node.js环境安装2-2、npm安装及参数设置（1）2-3、npm安装及参数设置（2）2-4、cnpm和vue-cli2安装2-5、创建vue-cli2项目2-6、更改vue-cli2的helloword2-7、配置语法高亮显示2-8、router实现页面跳转2-9、r... 查看详情

vue-router路由vue-cli脚手架和模块化开发之vue-cli2.x脚手架工具基于webpacksimple模板与基于webpack模板构建项目

Vue-CLI2.x脚手架工具基于webpacksimple模板构建项目  vue-cli是一个基于vue.js进行快速开发的完整系统。基于webpack构建，并进行默认配置，可通过插件扩展，可升级；vue-cli帮我们创建基本项目结构，跳过繁琐的项目配置环节，... 查看详情

前端面试题vue-cli目录汇总

...1f;你可以自己实现个类vue-cli吗？[vue-cli]你知道什么是脚手架吗？[vue-cli]vue-cli中你经常的加载器有哪些？[vue-cli]vue-cli怎么解决跨域的问题？[vue-cli]vue-cli生成的项目可以使用es6、es7的语法吗？为什么？[vue-cli... 查看详情

vue-cli(vue脚手架)安装(代码片段)

准备工作：　　首先安装node和npm（不会安装的话请参考：https://www.cnblogs.com/xihailong/p/13592421.html），并且保证node版本是v6及以上，话不多说，上图 　　然后使用npm指令安装vue3+，安装方式如下：npminstall-g@vue/cli　　安装完成：... 查看详情

vue教程(三十九)vue-cli2脚手架安装(代码片段)

Vue教程(三十九)vue-cli2脚手架安装VueCLI介绍CI是Command-Lineinterface，翻译为命令行界面，但是俗称脚手架。VueCL是一个官方发布vue.js项目脚手架，使用vue-cli可以快速搭建vue开发环境以及对应的webpacki配置。安装NodeJS可以直... 查看详情

vue教程(三十九)vue-cli2脚手架安装(代码片段)

Vue教程(三十九)vue-cli2脚手架安装VueCLI介绍CI是Command-Lineinterface，翻译为命令行界面，但是俗称脚手架。VueCL是一个官方发布vue.js项目脚手架，使用vue-cli可以快速搭建vue开发环境以及对应的webpacki配置。安装NodeJS可以直... 查看详情

[vue专题]对比vue-cli2.x和vue-cli3.x的搭建(代码片段)

简介：深入了解脚手架vue-cli2.x版本与3.x版本构建项目的区别搭建前提条件：node环境node是傻瓜式安装的，直接去官网下载安装不断下一步命令行输入node-v查询版本号，有版本号即安装成功node自带npm包管理工具（安装好node也可以... 查看详情

vue-cli2--使用/教程/实例

..._IT利刃出鞘的博客-CSDN博客简介说明    本文介绍Vue的脚手架工具Vue-cli的用法。        本文介绍的vue-cli的版本为2.0。官网github：https://github.com/vuejs/vue-cli/tree/v2#vue-cli--Vue-cli简介Vue-cli是Vue官方提供的用于初始化Vue项目... 查看详情

在脚手架vue-cli上引入插件jquery

1，安装：npmijquery 2,在build文件夹下面的两个文件进行配置：1）：webpack.base.conf.js:  2):webpack.prod.conf.js:  3,最后在main.js引入：   查看详情

vue-cli（vue的脚手架搭建过程）

　vue-cli定义：是脚手架工具，作用就是用配置好的模板迅速搭建起一个项目，省去了自己配置webpack文件。　搭建脚手架步骤：　　一、环境搭建　　　　1）在官网下载安装node.js，安装装完，输入node-v，出现版本号就说明安装... 查看详情

搭建vue脚手架（vue-cli）

搭建vue-cli脚手架构建工具步骤：首先：1、安装nodejs2.安装淘宝镜像(npminstall-gcnpm--registry=https://registry.npm.taobao.org)3、cnpm-v若出现相应的版本号则说明镜像安装成功4、安装webpack（npminstallwebpack-g）5、webpack-v检查是否安装成功6、安... 查看详情

安装使用vue-cli脚手架

（1）安装GitBashhttps://gitforwindows.org/（2）安装node.jshttps://nodejs.org/en/download/（3）打开GitBash输入命令node-v　　查询node.js是否安装成功npm-v　　查询npm是否安装成功（NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很... 查看详情

vue-cli脚手架使用--初学者

第一步:  安装环境:  1.npminstallwebpack-g  2.npminstallvue-cli-g  3.vueinitwebpack-simple  出现      4.npminstall  &nbs 查看详情