vue-cli 脚手架安装（精简图片教程）

最新推荐文章于 2024-05-23 23:08:29 发布
最新推荐文章于 2024-05-23 23:08:29 发布
阅读量351 收藏
点赞数
文章标签： vue-cli node.js环境配置 脚手架 vue-cli环境配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_xiong_/article/details/102798605
版权

1.系统环境

	系统：window 10 64专业版
	node.js:  node-v12.13.0-x64
	编译软件：JetBrains PhpStorm 2018.2.1 x64

2.node.js环境安装

1.下载node.js完后打开这个界面 ，一直点击Next就可以了
在这里插入图片描述
2.到了这里点击Install

在这里插入图片描述
3.，如果出来什么界面 只要点击确定就可以了
在这里插入图片描述
4.测试node.js是否安装成功，在cmd命令行中使用管理员权限打开 输入以下代码测试安装版本在这里插入图片描述
5.这里没什么问题就是成功了

3.安装vue-cli脚手架

1.输入npm install -g vue-cli安装脚手架
在这里插入图片描述
2.脚手架安装完成后，输入vue -V 查看是否安装成功
在这里插入图片描述
3.也可以输入这个测试一下，如果结果相同 就安装成功了 vue list 没有问题后就进行下一步在这里插入图片描述
4.输入 vue init webpack TEXT_10_29，创建一个名为 TEXT_10_29 项目，输入后会出现多种选项 ，根据选择可以自行配置
在这里插入图片描述
5.安装后出现如下图所示
在这里插入图片描述
6.输入 cd TEXT_10_29 进入创建的TEXT_10_29项目中
在这里插入图片描述

7.输入npm install 出现如下界面
在这里插入图片描述
8.输入npm run dev 运行项目 出现如下图就说明配置成功了
在这里插入图片描述
在这里插入图片描述
9.在浏览器中输入http://localhost:8080/ 出现如下图就安装成功了
在这里插入图片描述

如需还有什么问题 可以下本人QQ相互讨论 ：2100619291

Mr_xiong_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue脚手架安装
weixin_45641052的博客
02-12 5545
Vue脚手架安装
【Vue脚手架安装教程】
zjyJul的博客
04-27 3万+
文章目录前言一、安装Node.js二、配置淘宝镜像1.将npm设置为淘宝镜像：2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 安装Vue脚手架之前，要先安装node.js配置环境 提示：以下是本篇文章正文内容，下面案例可供参考 一、安装Node.js 1.搜索node.js官网下载自己对应版本 https://nodejs.org/ 2.打开文件双击安装，一直点next。安装目录可以更换成自己的目录，最后点击in....
Vue脚手架安装(一套超详细的流程)
最新发布
weixin_74941202的博客
05-23 1932
1.浏览器搜索node.js官网下载自己电脑系统所对应的版本号（我这里是windows11）,windows11以下的node.js的版本要更低一点。2.下载完成解压，点击安装，然后就是大家最喜欢的一键无脑点击next了，安装之前最好是先创建一个文件夹3.win+r输入cmd，在命令窗口分别输入 node -v 和 npm -v，出现了对应的版本号，恭喜你安装成功啦！
vue脚手架(vue-cli)详细安装过程
学习，是熵减的最有效途径。
08-16 3万+
CLI，俗称脚手架。全称是。vue-cli 是vue官方发布的开发vue项目的脚手架。vue脚手架用于自动生成vue和webpack的项目模板，是一个快速构建vue项目的工具，可以自动安装vue所需要的插件，避免手动安装各种插件、逐个引入的麻烦。以及自动配置webpack，之前我们都是手动配置webpack。首先是特别的繁琐，而且有一个很明显的问题是版本问题。版本不对可能就报错。以后这些事儿都交给我们的cli，他会自动帮助我们配置webpack。...
【CSDN软件工程师能力认证学习精选】vue.js 三种方式安装(vue-cli)
CSDN高校俱乐部官方博客
02-26 2197
CSDN软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网CSDN制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。 我们每天将都会精选CSDN站内技术文章供大家学习，帮助大家系统化学习IT技术。 Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web .
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
leo的博客
11-20 3万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
vue-cli脚手架的安装教程图解
12-02
vue-cli脚手架模板是基于node下的npm来完成安装，下面给大家介绍vue-cli脚手架的安装，具体内容如下所述： https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件： node在4.以上，npm在3以上，查看...
vue-cli脚手架-bulid下的配置文件
08-27
要使用Vue-cli脚手架，首先需要安装Node.js，并且全局安装Vue-cli。然后，可以使用Vue-cli创建一个新的Webpack项目。创建项目时，需要填写一些信息，如项目名称、项目描述、作者等。同时，也可以选择是否安装Vue-...
webstorm建立vue-cli脚手架的傻瓜式教程
01-18
2、点击 create 后出现以下选项，按键盘上下键选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动 3、选择配置，这时你会...
详解vue-cli 脚手架 安装
01-19
注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上； 二、 vue-cli 全局安装 命令行执行 : npm install -g vue-cli // 加-g是安装到全局 安装完成以后可以输入命令：vue 回车，可以看到针对vue的命令行； **:...
vue脚手架安装方法——2023年5月28日版本
红目香薰
05-28 1901
vue脚手架安装方法，2023年5月28日版本 node下载 node环境变量配置 npm全局文件夹与缓存文件夹设置 修改国内的【阿里】镜像 查看vue信息 安装VUE与路由 安装vue客户端 安装vue init 查看vue版本 配置新环境变量 创建Vue项目 启动Vue项目 通过vue服务路径访问 vue层级说明 源码目录 vetur插件安装 ​编辑 Demo示例 Router路由 路由使用语法： 路由实操： 设置路由： 表格遍历测试demo3 引入axios
vue-cli 脚手架的完整安装教程
美奇软件开发工作室
04-14 2万+
一、 node.js安装 1、如果不确定自己是否安装了node,可以在cmd命令行工具内执行： node -v （检查一下 版本）； 我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息。 2、如果 执行结果显示： xx 不是内部命令，说明你还没有安装node , node下载地址：http://nodejs.cn/do...
vue.js 脚手架安装
tjjucheng的博客
08-10 1万+
一、搭建环境 1、 安装nodejs （网址：https://nodejs.org/en/） 直接网上找下载就好。建议用推荐版本(8.11.3)。安装过程很简单，一路“下一步”就可以了。安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。安装成功后npm同时安装完成。 2、安装淘宝镜像 npm install -g cnpm --re...
安装vue-cli&使用vue-cli搭建项目
qq_64001795的博客
09-26 4499
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和 。这三个部分分别代表了 html,js,css。
如何快速安装vue-cli脚手架
静水流深，沧笙踏歌
05-13 7214
vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。vue-cli官方提供了一个脚手架，用于快速生成一个vue的项目模板。它预先定义好目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，他能使我们的开发更加快速。vue-cli这个构建工具大大降低了webpack的使用难度，支持热部署，有webpack-dev-server的支持，相当于启动了一个请
安装Vue CLI
qq_62837251的博客
05-15 522
要安装 Vue CLI，你需要先安装 Node.js 环境。
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
热门推荐
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
Vue-CLI安装方法
weixin_63731304的博客
03-30 3308
Vue-CLI安装方法，适合新手小白
安装vue-cli脚手架
07-28
npm install -g vue-cli ``` 3. 等待安装完成后，可以通过运行以下命令来验证 Vue CLI 是否安装成功： ``` vue --version ``` 如果能够输出 Vue CLI 的版本号，说明安装成功。 现在你已经成功安装了 Vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值