Vue基础目录结构与代码

创始人

2025-06-01 15:35:34

0次

作者简介：一名计算机萌新、前来进行学习VUE,让我们一起进步吧。

座右铭：低头赶路，敬事如仪

个人主页：我叫于豆豆吖的主页

前言

一.Vue.js 目录结构

1.目录解析

二.Vue.js 起步

三.Vue.js实现hello world

四.Vue.js 模板语法

插值

文本

文本插值

前言

本章将会讲解Vue.JS的目录结与基础代码。

一.Vue.js 目录结构

1.目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

二.Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

var vm = new Vue({// 选项
})

三.Vue.js实现hello world



Document

{{message}}

四.Vue.js 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

文本插值

 {{ message }}

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：Junit和logback概述

下一篇：中国人民大学与加拿大女王大学金融硕士—竭尽全力才知道自己有多出色

Vue基础目录结构与代码

前言

一.Vue.js 目录结构

1.目录解析

二.Vue.js 起步

三.Vue.js实现hello world

四.Vue.js 模板语法

插值

文本

文本插值

相关内容

热门资讯

Vue基础 目录结构与代码

前言

一.Vue.js 目录结构

1.目录解析

二.Vue.js 起步

三.Vue.js实现hello world

四.Vue.js 模板语法

插值

文本

文本插值

相关内容

热门资讯

Vue基础目录结构与代码