Vue CLI2脚手架安装与介绍

已于 2022-02-18 16:17:18 修改
阅读量316 收藏 1
点赞数
分类专栏： VUE 文章标签： vue.js webpack javascript
于 2022-02-18 11:35:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/122996458
版权

Vue CLI脚手架安装与介绍

1、什么是VueCLI

脚手架官方参考文档

在这里插入图片描述

2、Vue CLI使用前提

2.1、Vue CLI使用前提-安装Node

在这里插入图片描述

2.2 、Vue CLI使用前提-安装Webpack

在这里插入图片描述

3、VueCLI的使用

3.1、安装Vue CLI

在这里插入图片描述

4、VueCLI2初始化项目过程

4.1、初始化项目

在这里插入图片描述

上述初始化过程详解
在这里插入图片描述初始化成功：
在这里插入图片描述

4.2、项目目录详解

在这里插入图片描述

  • package-lock.json记录的是node_modules中安装的真实版本的依赖。
  • package.json只是指定了个大致版本 ^是通配符的意思。表示大于等于该版本。
    在这里插入图片描述
小码哥呀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-cli(脚手架)安装
Cccy1567的博客
07-24 694
新手整理搭建vue脚手架，根据多篇博客自己整理以方便查阅
vue-cli脚手架的安装教程图解
12-02
vue-cli脚手架模板是基于node下的npm来完成安装，下面给大家介绍vue-cli脚手架的安装，具体内容如下所述： https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件： node在4.以上，npm在3以上，查看...
vue-cli 脚手架详细介绍
几许的博客
07-07 1199
vue-cli`也叫vue脚手架,`vue-cli`是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。 脚手架：搭建好的一个架子，我们在架子上进行开发
学习笔记·Vue CLI 脚手架的安装方法
m0_57982594的博客
03-16 1481
以VSCode为例，Vue Cli2脚手架的环境安装及框架架构实例
安装vue-cli脚手架（详细教程）
weixin_53221528的博客
11-15 2519
我们安装vue-cli脚手架需要先安装Node.js并配置好其环境。
Vue Cli脚手架—安装Nodejs和Vue Cli
qq_40918495的博客
04-29 905
一，Vue Cli 文档地址: https://cli.vuejs.org/zh/二，.环境配置，搭建项目1.安装node.js2.下载 node.js10.16.3 地址: https://nodejs.org/en/blog/release/v10.16.3/3.安装 node.js10.16.3 , 直接下一步即可, 安装到 d:\program\nodejs10.14.验证是否安装成功, 如果看到不到, 退出 cmd, 重新开一个窗口测试即可。
一、【VUE-CLI】Vue CLI 脚手架介绍及安装
天行健，君子以自强不息
08-03 3159
Vue CLI 脚手架介绍及安装
vue脚手架(vue-cli)详细安装过程
热门推荐
学习，是熵减的最有效途径。
08-16 3万+
CLI，俗称脚手架。全称是。vue-cli 是vue官方发布的开发vue项目的脚手架。vue脚手架用于自动生成vue和webpack的项目模板，是一个快速构建vue项目的工具，可以自动安装vue所需要的插件，避免手动安装各种插件、逐个引入的麻烦。以及自动配置webpack，之前我们都是手动配置webpack。首先是特别的繁琐，而且有一个很明显的问题是版本问题。版本不对可能就报错。以后这些事儿都交给我们的cli，他会自动帮助我们配置webpack。...
Vue脚手架（cli）安装教程
lbf198303的博客
06-18 1952
2.下载完成解压，点击安装，然后就是大家最喜欢的一键无脑点击next了，但是建议大家选择路径的时候。3.检查安装是否成功 输入 vue -V (V为大写) 或者 vue --version。-v14.17.3-x64.msi）放在桌面上或一个确定的文件夹（此处以桌面为例）；"自己路径下node_global文件夹的路径"node_globa(npm全局模块的存放路径)2.在命令行窗口运行以下两条命令（自己路径下的）"自己路径下node_cache文件夹的路径"node_cache(cache的路径)
如何快速安装vue-cli脚手架
静水流深，沧笙踏歌
05-13 7236
vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。vue-cli官方提供了一个脚手架，用于快速生成一个vue的项目模板。它预先定义好目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，他能使我们的开发更加快速。vue-cli这个构建工具大大降低了webpack的使用难度，支持热部署，有webpack-dev-server的支持，相当于启动了一个请
前端基础学习——Vue-Cli脚手架介绍
weixin_53919192的博客
07-12 823
本文为大家介绍了前端基础学习——Vue-Cli脚手架，希望对你有帮助~~
详解vue-cli 脚手架 安装
01-19
注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上； 二、 vue-cli 全局安装 命令行执行 : npm install -g vue-cli // 加-g是安装到全局 安装完成以后可以输入命令：vue 回车，可以看到针对vue的命令行； **:...
Vue 安装 vue-cli 脚手架 & 创建 vue 项目
01-06
windows vue vue-cli 安装 macos 前往 node.js 官网下载 MacOS 版然后无脑下一步。安装完成后验证一下。 node -v # 验证 nodejs 版本 npm -v # 验证 npm 版本 切换 npm 为淘宝源。 // 切换到淘宝镜像 npm config ...
VUE中的重点*
qq_61132537的博客
07-22 1056
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
通过不同方式在 Vue 3 中传递路由参数
点点滴滴
07-25 539
通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。
vue字段判断是否可以鼠标悬浮或者点击跳转
qq_58307541的博客
07-24 341
通过字段判断是否可以鼠标悬浮展示颜色 + 是否点击。
vue+canvas音频可视化
最新发布
m0_56104994的博客
07-25 349
canvas制作音频可视化
Vue事件总线（EventBus）的概念、使用以及注意事项
weixin_53216033的博客
07-23 800
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
Vue Router高级用法：动态路由与导航守卫
天涯学馆
07-24 565
在router.js或routes: [},],});这里，:id是一个动态段，它可以匹配任何字符串。Vue Router的动态路由和导航守卫机制为构建复杂单页应用提供了强大的工具。动态路由使你能够根据实际URL中的参数灵活地调整组件的行为，而导航守卫则允许你在路由跳转前后执行自定义逻辑，如权限检查、数据预取等。通过本教程的学习，你应该能够掌握Vue Router的核心功能，并将其应用于实际项目中。
vue-cli脚手架工具安装
08-28
你可以通过以下步骤来安装 Vue CLI 脚手架工具： 1. 确保你已经安装了 Node.js。你可以在终端中运行 `node -v` 来检查是否已安装。 2. 打开终端或命令提示符，并运行以下命令来全局安装 Vue CLI： ``` npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值