vue入门例子(二)

最新推荐文章于 2023-07-20 20:09:15 发布
最新推荐文章于 2023-07-20 20:09:15 发布
阅读量435 收藏
点赞数 1
分类专栏： vue 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peichuangbao5059/article/details/97009554
版权
本文详细解析Vue脚手架创建的hello-world项目的目录结构和逻辑流程。主要涉及dist、node_modules、src目录，以及首页逻辑、public/index.html、src/main.js、src/App.vue和src/components/HelloWorld.vue的分析。通过组件化和Vue实例的关联，展示如何将内容呈现到id为app的div中。
摘要由CSDN通过智能技术生成

vue入门例子(二)

这篇说一下vue脚手架hello-worldl例子的目录结构和流程分析。

目录结构

dist

执行下面命令后生成,是将所有资源打包压缩后的输出内容。

npm run build

node_moudules

文件package.json和package-lockjson定义项目依赖的包。执行下面命令后会去下载依赖的包。

npm run install

src

src存放源码

  • assets 静态文件目录
  • comments 组件目录

整体逻辑分析

首页

在这里插入图片描述
审查页面我们会发现内容都在一个id为app的div里

public/index.html

这是入口页面。我们会发现一个id为app的div

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible&
最低0.47元/天 解锁文章
简单码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-引入Element练习1
weixin_45524929的博客
08-29 54
4.采用全局引入，进入main.js文件，加粗为修改内容。2.选择vue3，等待安装成功后，打开工程项目。3.打开终端，引入element组件库。1.用cmd打开，创建新工程项目。
Vue实现改变子组件的值同时改变父组件的值
qq_51053759的博客
01-21 500
父组件 <template> <div class="home"> <div class="test"> <h1 class="title" @click="add = true">显示提示框</h1> <HelloWorld :add.sync="add" v-if="add"/> </div> </div> </template> <script> impor
package-lock.json 的作用，如果项目中没有的解决方案
Baron的技术blog
09-09 3704
package-lock.json 有什么作用，如果项目中没有它会怎么样，举例说明 [分值：5] 您的回答：package-lock.json作用是将使用的库的版本锁定,如果下次再安装依然使用这些版本的库 经常碰到的场景是同事机器上能跑的代码,在我这新装一遍跑不了,可能就是有些库更新后不兼容当前使用的场景,原因有 和别的库冲突 调用api变化 和当前开发环境不兼容 产生这种情况的原因是package.json里写库的版本很多时候是~1.0这样的写法,意思是只要大版本一样,后面小版本会用最新的,除非是1
关于package.json 和package-lock.json
qq_17335549的博客
05-12 7436
每日鸡汤，每个你想要学习的念头都是未来的你向自己求救 一直在纠结，每次pull 完代码之后重新install ， package-lock.json就改变了，那么我改完代码之后需要把这个package-lock.json提交么？ 让我们先来来看看package.json 每个包前面的^ 代表 大版本的依赖包^1.2.3中的1 ～ 代表次要版本号 ~1.2.3中的2 如果什么符号都不加则是指定版本，这也就是说的锁定版本，好处是避免包更新带来的bug 指定安装版本npm install xx@1..
（填坑篇）Vue3.0全局引入Vant组件
风生晚凉的博客
03-03 7237
废话不多说，上步骤 1. 安装vant npm i vant 2. main.js里面引用相关资源 import vant from 'vant'; import 'vant/lib/index.css'; 3. main.js里面的完整代码如下 import { createApp } from 'vue' import App from './App.vue' import router from './router' import vant from 'vant'; import
vue入门小例子
07-08
在“vue入门小例子”这个项目中，我们可以看到作者通过实践Vue.js的基本特性来学习和理解这个框架。这里我们将深入探讨Vue.js的核心概念和在`TestVUE.html`和`vue.js`这两个文件中可能涉及的知识点。 首先，Vue.js...
基于vue-cli、elementUI的Vue超简单入门小例子（推荐）
12-10
这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-...
Vue入门day01笔记
10-27
### Vue入门day01笔记详解 #### 库与框架的区别 在软件开发中，库（library）和框架（framework）都是提高开发效率、简化开发流程的重要工具，但它们有着本质的区别。 - **库（Library）**： - 库通常为开发者...
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
VUE2.0入门视频09
11-30
Vue 2.0入门视频系列旨在帮助开发者快速掌握这个框架的基础和进阶概念。第九课“如何划分组件”是学习Vue.js核心特性的关键部分，因为组件化是Vue.js设计哲学的核心。 组件系统是Vue.js中的一个强大特性，它允许...
前端面试：npm install 生成的package-lock.json是什么文件？有什么用？
qq_43592064的博客
07-20 1421
npm install 生成的package-lock.json是什么文件？有什么用？
Windows10 安装 Vue3
苹果2008的博客
01-12 3615
一、安装Node.js 下载Node.js，Node.js的官网下载地址为Download | Node.jshttps://nodejs.org/en/download/下载完成后，双击.msi文件，将默认安装路径按照喜好修改，其余的设置默认即可，不需要勾选安装的附加选项。 二、更新Node.js 1.以管理员身份运行命令提示符工具，输入"node -v"，出现版本号，说明node.js安装成功。 2.输入"npm -v"查看npm版本号 3.对npm进行更新，"npm -g install n
package-lock.json是用来干啥的呢？
Lam's IT Story
08-04 2428
用一句话来概括很简单，就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。 以下引用别人的详细介绍 根据官方文档，这个package-lock.json 是在 `npm install`时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。 它有什么用呢？因为npm是一个用于管理package之...
从零开始在NPM上发布一个Vue组件
weixin_34014555的博客
11-23 202
TL;DR 本文细致讲解了在NPM上发布一个Vue组件的全过程，包括创建项目、编写组件、打包和发布四个环节。 创建项目 这里我们直接利用@vue/cli来生成项目。如果没有安装@vue/cli的话，可以使用以下方法进行安装： # 如果喜欢npm npm i -g @vue/cli # 如果喜欢yarn yarn global add @vue/cli 复制代码此外，如果安装了npx（高版本的...
解决报错 We‘re sorry but doesn‘t work properly without JavaScript enabled. Please enable it to continue.
热门推荐
前端职场小白_炜晨科技的博客
09-16 4万+
解决报错 We‘re sorry but doesn‘t work properly without JavaScript enabled. Please enable it to continue. vue项目打包发布到线上之后报错修改router模式之后重新打包上传就可以了。
Vue组件通讯方式
m0_38066007的博客
05-20 169
props / $emit 父组件 <template> <div class="home"> <HelloWorld msg="Welcome to Your Vue.js App" @showMsg="showMsg"/> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export defa
package-lock.json 文件的作用
weixin_30563917的博客
06-08 415
npm5之后安装文件之后会多出一个package-lock.json的文件，它的作用是： 1. 安装之后锁定包的版本，手动更改package.json文件安装将不会更新包，想要更新只能使用 npm install xxx@1.0.0 --save 这种方式来进行版本更新package-lock.json 文件才可以 2. 加快了npm install 的速度，因为 package-lock.j...
vue 组件通信的几种方法
soso杰
06-18 178
父传子的方法 // 父组件 <HelloWorld msg="Welcome to Your Vue.js App"/> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld }, // 子组件 {{msg}} props: { msg: String, }, ...
vue中的事件处理
lv_suri的博客
07-30 2332
lazy的效果就是可以将实时的给你变成不实时的。在默认的情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。单文件组件，单文件组件（又称.vue文件,缩写是SFC）是一种特殊的文件格式，它允许将vue组件的模板、逻辑、与样式封装在单个文件中。组件与组件之间是需要存在交互的否则完全没有关系，组件意义就很小了。attribute,同时也可以决定组件与组件之间的传递。（2）APP.vue根组件文件代码。（2）APP.vue根组件文件代码。七，是props组件交互。.............
vue 入门 demo
最新发布
07-20
Vue.js入门示例通常涉及创建一个简单的单页应用，这里有一个基础的Vue组件Hello World的例子： ...这是最基本的Vue入门教程中的步骤，通过实践，你可以学习到更多关于Vue指令如`v-on:click`、计算属性、组件化等知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值