Vue-Cli（脚手架）简单讲解

最新推荐文章于 2024-05-16 13:10:03 发布
最新推荐文章于 2024-05-16 13:10:03 发布
阅读量167 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42852657/article/details/84137793
版权

这里讲解一下Vue-Cli的一些基本使用方法
一般新创建好的脚手架：
在这里插入图片描述

一、插件的配置

我们所需要的所有插件都要写在package.json这个文件中：
在这里插入图片描述
然后在cmd中输入npm install然后就会自动把你所需要的插件下载下来，当然一些最基础的插件已经下载配置好了，当然插件下载下来之后还需要在src中的main.js文件中进行配置，最常用的插件有:ajax插件‘axios’，库插件‘Vuex’这相当于一个库，使我们不用去自己写组件之间的通讯。

二、插件的使用

插件的使用都写在mainjs中：
在这里插入图片描述
先import把插件引入文件中，再用Vue.use用他。

三、组件的使用

在这里插入图片描述
组件全部写在componnents中，并在route中进行配置

施天琦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图文讲解用vue-cli脚手架创建vue项目步骤
01-19
用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构。今天小编我便来记录一下vue-cli脚手架的构建项目的经验。 1、首先便是要搭建好vue-cli脚手架工具才行滴。搭建vue-cli脚手架工具的方法便是如图所示这样滴。 2、然后指定一个目录并用vue init webpack+项目名称便可得到前端项目的结构了哦。 3、接着便是一路回车来确认项目所用到的一些语法和测试包即可。 4、接着便可看到依赖包已经配置成功了。可以用cd来进入项目里边并执行npm run dev即可启动刚才初始化搭建的项目了。 5、接着看看bdjy这个目录里面就有了vue项目结构的一些依赖包了哦。
Vue实战之Vue CLI 脚手架
helloworld工程师的博客
02-22 814
Vue CLI 脚手架 14.1 什么是CLI 命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI） 14.2 什么是Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。 14.3 Vue CLI优势 通过 vue-cli
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目_vuecli搭建项目(1)
最新发布
2401_84447043的博客
05-16 395
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一、什么是VueCLI1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。3、CLI是什么意思？4、脚手架长什么样？5、脚手架依赖于node.js和webpack二、安装Vue CLI脚手架三、runtime-compiler和runtime-only的区别。
Vue-cli(vue脚手架)上万字总结，超详细教程
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
Vue-cli（脚手架）的创建
计算机硕士的博客
04-26 2967
Vue-cli（脚手架）的创建。
Vue CLI脚手架
申小兮和林小兮的博客宝
04-14 1007
plugin介绍及使用，搭建本地服务，Vue CLI脚手架介绍及Vue CLI最新版本详细操作步骤，VueCLI2版本的项目创建步骤
Vue CLI 脚手架详解：快速构建 Vue.js 项目的利器
weixin_43749805的博客
06-15 1165
Vue CLI 是 Vue.js 官方提供的脚手架工具，它可以帮助开发者快速搭建 Vue.js 项目的基础结构，并提供了丰富的功能和插件来增强开发体验。本文将深入解析 Vue CLI 的使用方法和特性。
详解使用vue-cli脚手架初始化Vue项目下的项目结构
08-27
详解使用vue-cli脚手架初始化Vue项目下的项目结构 在本文中，我们将详细介绍使用vue-cli脚手架初始化Vue项目下的项目结构。vue-cli是Vue提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用...
详解vue-cli 脚手架 安装
10-17
Vue CLI，全称为Vue.js Command Line Interface，是一个官方提供的强大脚手架工具，用于快速搭建Vue.js项目。本文将详细讲解Vue CLI的安装过程，并简要介绍初始化项目后的文件配置。 首先，确保你的计算机上已经...
在vue-cli脚手架中配置一个vue-router前端路由
12-09
这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容，分享出来供打击参考学习，下面来一起看看详细的介绍： 首先你需要一个main.js文件 //然后引入vue-router import VueRouter from '...
4.1 什么是脚手架（CLI）
天天向上
12-16 2229
Vue CLI叫做脚手架。CLI：Command-Line Interface，翻译为命令行界面，俗称脚手架。 如果你只是简单写几个Vue的Demo程序，那么你不需要Vue CLI。使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置。 使用条件：Node8.9以上版本、NPM 如果安装过慢，可以安装淘宝镜像，通过cnpm安装。 npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用cnpm命
vue-cli脚手架
lanlan112233的博客
04-13 2107
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程删除已安装的 vue-cli先安装淘宝镜安装cli安装结束后，你可以通过或vue -V查看 vue-cli 的版本信息。
什么是vue CLI (脚手架)?
qianduan2001_5的博客
05-26 251
Vue CLI是一个官方发布 vue.js 项目脚手架。vue语法版本: 1.x 废除 2.x 之前的主流,大部分老项目都在用 3.x 21年上半年正式发布,大部分新项目在用。使用上, 脚手架就是一个nodejs模块, 使用npm下载安装后结合webpack打包工具可快速生成一个vue项目架构。vue脚手架版本: 1.x/2.x 以前老的项目使用的版本 3.x/4.x/5.x目前主流版本。代码中, 一个网站,app项目也要使用脚手架进行搭建, 使用脚手架可以快速搭建一个vue项目。
vue脚手架搭建、介绍和初始页面的构造（图文详细）
m0_56369204的博客
06-28 4407
如何解决繁琐的项目初始化过程，快速搭建一个Vue项目，而不必担心复杂的配置和设置？Vue脚手架Vue Scaffold（Vue CLI）将实现这个功能，本文将带你入门Vue脚手架，熟悉项目结构和基本配置。
从0搭建一个自制cli脚手架（附常见问题解决方案）
hans774882968的博客
01-29 1720
项目地址：https://github.com/Hans774882968/hans-cli 环境：Windows10 相信很多人都是通过vue-cli第一次认识前端脚手架。我们通过npm install -g vue-cli命令全局安装脚手架后，再执行vue create project-name就能初始化一个vue项目。那么我们能不能写一个自己的脚手架，方便地初始化一个项目？答案不仅是肯定的，难度还不大！ 用到的工具 commander 用来编写指令和处理命令行。例： const program = r
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
热门推荐
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
Vue-CLI详解
输入技术、输出想法
04-28 2万+
Vue-CLI详解Vue-CLI详解Vue CLICLI是什么意思?拉取 2.x 模板 (旧版本)Vue CLI2创建项目目录结构详解Runtime-Compiler和Runtime-only的区别render和templateVue程序运行过程render函数的使用Vue CLI3创建vue-cli3目录结构详解配置去哪里了？修改配置箭头函数基础语法 Vue-CLI详解 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI;如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue C
Vue脚手架（cli和vite详解）
stc_ljc的博客
11-29 5264
Vue 不会强制你选择某种开发、打包方式，但vue的生态系统提供了许多工具，例如 Vue CLI 和最近的推出的Vite js。那么你应该使用 Vite 还是 Vue CLI？在做出选择的时候，了解 Vite 和 Vue CLI 之间的区别会对我们有很大的帮助。在本文中，我将带着了解一下 Vite 与 Vue CLI，以便你可以根据自己的需求做出最佳选择。
什么是Vue的脚手架（Vue CLI）？
Java徐师兄的博客
06-11 1659
除了使用内置的插件外，我们还可以通过自定义配置文件来扩展 Vue CLI 的功能。我们可以在文件中添加自定义选项来满足我们的需求。例如，我们可以使用});} , };在这个示例中，我们使用选项来修改 Vue.js 的编译器选项，以移除输出中的空格。通过这种方式，我们可以对构建过程进行更细粒度的控制。Vue CLI 是一个非常有用的工具，可以帮助我们快速构建 Vue.js 应用程序。它提供了许多内置的插件和工具，可以大大简化我们的开发工作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值