vue-cli2,vue-cli3（vue脚手架）超详细教程_vue2+cli3-程序员宅基地

技术标签： vue-cli 脚手架前端 vue.js npm Vue全家桶

文章目录

vue-cli脚手架

vue-cli脚手架

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

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

Node.js环境安装

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

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

在这里插入图片描述

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

在这里插入图片描述

这一步建议选中复选框，这样即便安装过程中有需要依赖的如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文件夹就是发布成功后的文件，直接将这些文件上传到服务器根目录，就可以作为服务器的前端页面文件了

在这里插入图片描述

本文链接：https://blog.csdn.net/weixin_42768634/article/details/123021401

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Ubuntu22.04安装Nvidia 550驱动和CUDA toolkit 12.4.1

4. 验证CUDA toolkit 12.4.1安装成功。3. 为CUDA12.4在.bashrc中添加环境变量。

清除input输入框的缓存_chromeinput同name清理缓存-程序员宅基地

文章浏览阅读2.3k次。有过表单设计经验的朋友肯定知道，当我们在浏览器中输入表单信息的时候，往往input文本输入框会记录下之前提交表单的信息，以后每次只要双击 input文本输入框就会出现之前输入的文本，这样有时会觉得比较方便，但有时也会暴露用户的隐藏数据，那么如何让input表单输入框不记录输入过信息的方法呢？方法一：在不想使用缓存的input中添加 autocomplete=“off”例如:名字：<input type="text" name="FirstName" value="" autocomplete=_chromeinput同name清理缓存

Java知识总结-基础

** * 外部内、内部类 */ public class Outer { public static IAnimal getInnerInstance(String speak){ return new IAnimal(){ @Override public void speak(){ System.out.println(speak);当程序第一次引用该类的静态成员时，就会触发这个类的加载。

Apache Kylin Buid Cube详细流程_kylin buid cuboid的时候每一步都要等待2分钟-程序员宅基地

文章浏览阅读506次。Build Cube流程主要分为四个阶段：根据用户的cube信息计算出多个cuboid文件根据cuboid文件生成htable更新cube信息回收临时文件1.流程一：作业整体描述把构建Cube的来源表总行数写到指定的HDFS文件中2.流程二：生成中间临时数据这一步的操作是根据Cube设计中的定义生成原始数据，这里会新创建一个Hive外部表，然后再_kylin buid cuboid的时候每一步都要等待2分钟

团队管理视角-程序员宅基地

文章浏览阅读779次。一个管理者要带团队有三重视角：第一个视角是管理者，第二个视角是教练员，第三个视角是指挥员。管理者视角管理者视角，最常规的视角。比如效率和质量如何衡量？如何分解和分配任务？项目进展怎么样了？进度怎么估算？有没有瓶颈，瓶颈在哪？根因是什么？绩效怎么考核？而今天我们要讨论的是管理者的首要目标——求生存。如果一个团队在公司里没有价值了，那么整个团队都会被裁掉。所以，作为管理者最重要的是先能生存下来，证明自己是能胜任的，然后证明自己的团队是能胜任的。证明自己理解何为胜任，就是领导布置任.._管理视角

什么场景要使用策略模式，什么场景不能使用？_java 策略模式什么情况不适合-程序员宅基地

文章浏览阅读916次。需完整版面试文档扫描左侧二维码拿！滴，老年卡；滴，学生卡；滴正常卡。我们在坐公交车的时候啊，这个场景每天都在上演。那如果，让你来设计这样一套刷卡的结算逻辑，你最先想到的是用什么设计模式呢？如果，让我来设计，我最先想到的就是策略模式。另外，我把往期面试题解析的配套文档我已经准备好，想获得的可以在我的煮叶简介中找到。那么什么场景要使用策略模式，什么场景又不应该使用策略模式呢？我们可以先来看官方对策略模式的定义。1、官方定义官方原文是：Define a family of algor_java 策略模式什么情况不适合

随便推点

短视频交友系统搭建重点，会用到哪些三方服务？

在搭建短视频交友系统时，需要根据实际需求选择合适的第三方服务，并与这些服务提供商建立良好的合作关系，确保服务的稳定性和可靠性。在搭建短视频交友系统时，为了确保系统的稳定性、安全性和用户体验，通常需要用到多种第三方服务。可以选择云存储服务，如阿里云OSS、腾讯云COS等，它们提供高可靠性、高扩展性的存储解决方案。：如阿里云、腾讯云等，提供稳定、可扩展的服务器资源，确保短视频交友系统能够应对高并发和大规模用户访问。：根据用户的观看历史、兴趣偏好等信息，为用户推荐合适的短视频和交友对象，提升用户体验和留存率。

单片机毕业设计 stm32宠物自动喂食系统_基于stm32单片机宠物自动喂食设计-程序员宅基地

文章浏览阅读2.8k次，点赞5次，收藏95次。Hi，大家好，学长今天向大家介绍一个单片机项目基于stm32的宠物自动喂食系统大家可用于课程设计或毕业设计该传感器模块对环境光线适应能力强，其具有一对红外线发射与接收管，发射管发射出一定频率的红外线，当检测方向遇到障碍物时，红外线反射回来被接收管接收，经过比较器电路处理之后，绿色指示灯会亮起，同时信号输出接口输出数字信号（一个低电平信号），可通过电位器旋钮调节检测距离，有效距离范围 2～30cm，工作电压为 3. 3V-5V。实物图如。_基于stm32单片机宠物自动喂食设计

iOS-html调起APP并传参_html ios拉起第三方app-程序员宅基地

文章浏览阅读5.7k次。前一段时间要做一个html页面调起APP应用的需求，特记下研究成果 1、在项目info.plist中添加URL Types以供html调用 2、在html中调用支付页面 var_html ios拉起第三方app

信息安全风险评估---矩阵法计算风险_威胁程度计算-程序员宅基地

文章浏览阅读1.6w次，点赞16次，收藏29次。矩阵法计算风险假设：有以下信息系统中资产面临威胁利用脆弱性的情况：共有两项重要财产：资产A1和资产A2；资产A1面临一个主要威胁T1；资产A2面临两个主要威胁T2,T3；威胁T1可以利用资产A1存在的两个..._威胁程度计算

《SoC设计方法与实现》（1）_soc设计方法与实现 epub-程序员宅基地

文章浏览阅读347次。SOC（System On Chip）即系统级芯片，又称片上系统，其将系统的主要功能综合到一块芯片中，本质上是在做一种复杂的IC设计。现在的SOC芯片上可整体实现CPU、DSP、数字电路、模拟电路、存储器、片上可编程逻辑阵列等多种电路，综合实现图像处理、语音处理、通信协议、通信机能、数据处理等功能。SOC的优势有：可以实现更为复杂的系统、具有较低的设计成本、具有更高的可靠性、缩短产品设计时间、减少产品反复的次数、可以满足更小尺寸的设计要求、可达到低功耗的设计要求。_soc设计方法与实现 epub

Linux内核模块动态添加方法_linux 将moudle动态加入内核-程序员宅基地

文章浏览阅读391次。Linux内核模块动态添加方法今天下午通过一番折腾，终于琢磨除了Linux内核模块的动态加载方法，网上大部分教程基于旧版本做的，有很多地方不一样，走了很多弯路，不过最后终于成功了，方法如下：1、建立C++源文件，假设文件目录为path,文件名为hello.c源代码如下：#include #include