VueCLi的使用和单文件组件

最新推荐文章于 2022-11-19 15:51:24 发布
最新推荐文章于 2022-11-19 15:51:24 发布
阅读量243 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41405524/article/details/126354894
版权

介绍

前面我们都是基于基础的html页面进行开发的，实际开发中我们一般会用另一个方法也就是VueCLI来创建Vue项目，下面来看看步骤吧

步骤

打开CMD查看node和npm版本

在这里插入图片描述

进入项目目录下使用VueCLI创建项目

cd desktop

vue create demo

选择Manually select features回车

在这里插入图片描述

选中如图的内容，回车

在这里插入图片描述

选择3.x版本的vue，回车

在这里插入图片描述

选y

在这里插入图片描述

选择sass

在这里插入图片描述

选择ESLint with error prevention only

在这里插入图片描述

选择Lint on save

在这里插入图片描述

选第一项

在这里插入图片描述

选y

在这里插入图片描述
在这里插入图片描述

正在创建

在这里插入图片描述

在这里插入图片描述

创建完成

在这里插入图片描述

为了编写代码方便，我们使用WebStrom打开项目

右键项目文件夹，选择使用WebStrom打开

在这里插入图片描述

新项目都需要

npm install

来安装必要的插件

在这里插入图片描述

安装好插件后就可以运行项目了

npm run serve

启动成功，访问http://localhost:8080/

在这里插入图片描述

单文件组件案例

根据上面新建的Vue项目为基础，来完成单文件组件案例的编写

编辑子组件

在这里插入图片描述

父组件中引入子组件，并传递数据给子组件展示

在这里插入图片描述

效果

在这里插入图片描述

至此

BirdMan98
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue-cli3开发单文件组件
06-21
本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之...
使用 Vue cli 3.0 构建自定义组件库的方法
10-17
这篇文章将介绍如何使用 Vue CLI 3.0 构建自定义的组件库，帮助开发者创建自己的 UI 库。 首先，确保已经安装了 @vue/cli 3.0。如果没有，可以通过运行 `npm install -g @vue/cli` 来全局安装。然后，可以创建一个...
vue-cli 单文件组件
天空之外
09-26 266
什么是vue-cli单文件组件 vue-cli 是官方提供的一个脚手架工具，它可以快速的生成vue的项目模板。 官方网址：http://www.npmjs.com/package/vue-cli 主要功能 提供了一个规范的目录结构 本地调试 代码部署 热加载 单元测试 怎么建立 npm install vue-cli npm init webpack npm install npm run d...
【Vue】VueCLI 的使用和单文件组件（1）
看花容易绣花难
11-10 458
VueCLI 的使用和单文件组件（1）
【Vue】VueCLI 的使用和单文件组件（2）
看花容易绣花难
11-11 624
VueCLI 的使用和单文件组件（2）
3天学会Vue之基本知识（第三天：单文件组件（vue-cli））：结合项目开发经验，总结最关键的内容
技术+管理+经验+沟通+人品=>合格的项目管理者
04-26 518
介绍单文件组件（vue-cli）相关知识点。详细介绍了vue-cli脚手架项目的开发基础知识，目录结构和文件作用，以及component和views两个核心文件内容的编写
【Vue】Vue-cli(脚手架)实现单文件Vue组件的调用（图文和代码）
【敦厚的曹操】的专栏
03-28 783
一、实现效果 二、实现步骤 1、单文件Vue组件School.Vue（在components） <template> <!-- 组件一 --> <div class="demo"> <h2>---------【School.vue】---------</h2> <h2>学校名称：{{ schoolName }}</h2> <h2>学校地址：{{ address
Vue(四)——单文件组件
黎小小的博客
01-27 1167
单文件组件 vue 的单文件组件是官方提供的一种用来组织组件代码的形式，该文件以 .vue 为后缀，该文件会被 vue-cli 内置的 webpack 解析生成对应的 javascript、html、css 文件 https://vue-loader-v14.vuejs.org/zh-cn/start/spec.html 一、组成 单文件组件把一个组件所包含的 结构、样式、行为 分别通过 template、style、script 进行分离包含，然后统一组织在一个文件中 一个单文件组件最少必须包含
自己动手 webpack 打包 vue 单文件组件
csdn姚宏波
03-10 3572
1. 为什么要了解这些 vue 的脚手架集成了 webpack，并进行了大量的默认配置 我们只需要按照框架的要求编写代码，打包就好了 慢慢的我们就成了傻瓜，不知道这其中到底发生了什么，一旦遇到问题，不知道该如何思考，因为你可能都不清楚它的运作原理 更何况，看尤大的思路，将来很可能使用脚手架创建项目时，打包工具不再是默认的，而是让你 webpack 和 vite 二选一 所以，我们就更需要对打包过程有一个大概的了解 下面我们就手动实现这一点 2. 动手实践 SPA 和组件化密不可分，组件化让S
Vuecli项目结构，及组件的使用
最新发布
weixin_52548565的博客
11-19 1979
Vuecli项目结构，及组件的使用
vuejs 单文件组件.vue 文件的使用
10-19
Vuejs 的单文件组件以 `.vue` 文件扩展名存在，将模板（Template）、脚本（Script）和样式（Style）集成在一个文件内，简化了组件的组织和管理。这种组件化的开发模式使得代码更加模块化，提高了开发效率。 `.vue` ...
使用VueCLI3构建的示例组件库
08-10
每个组件应作为一个独立的文件或文件夹存在，包含`.vue`文件，这是一种单文件组件（Single File Component，SFC）格式，包含了模板（Template）、脚本（Script）和样式（Style）三个主要部分。 例如，假设我们的`...
Vue单文件组件开发实现过程详解
10-15
4. 使用`vue serve`命令快速启动一个Vue项目，用于开发Vue单文件组件。先全局安装`vue-cli-service-global`： ``` npm install -g @vue/cli-service-global ``` 5. 创建一个名为`App.vue`的文件，编写基本模板，...
NPM配置国内镜像源
鸟人的博客
07-20 3208
在前端开发中经常会使用NodeJS来管理前端包，最常用的包管理工具就是NPM了，但是NPM是从国外镜像地址下载的，往往速度会比较慢，下面我们就来配置一下NPM的国内镜像源代理吧。
Vue3新特性
鸟人的博客
07-17 2233
Vue是当前静态前端语言的代表之一，它的很多特性能加快前端页面的加载访问速度，进一步优化系统用户体验，自Vue诞生以来收到广大开发者的青睐，最新的Vue3更是结合多年Vue开发痛点做了优化，下面就来看看Vue3的新特性吧Vue3的文档地址。.........
Vue显示隐藏组件
鸟人的博客
07-19 1953
使用Vue实现显示隐藏Vue组件的功能。
Vue表单提交
鸟人的博客
07-19 1495
使用Vue进行表单提交。
Vue编写反转字符串
鸟人的博客
07-19 1460
使用JS中字符串的Split，Reverse和Join方法做字符串的反转，使用v-onclick绑定Vue事件。用Vue实现一个将字符串翻转的功能。
Vue3整合ElementPlus
鸟人的博客
07-24 627
前端开发框架ElementPlus在企业开发中十分常见，下面来看看Vue3如何整合ElementPlus的吧。
Vue框架总结.pdf
04-03
然而，在实际开发中，我们更倾向于使用单文件组件（Single File Component，简称SFC）这种形式，因为它将模板、脚本和样式集成为一个独立的文件，提高了代码的组织性和可维护性。 单文件组件通常以.vue为扩展名，其...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BirdMan98

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值