Vue.js 目录结构

目录解析

目录/文件说明
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 格式
在前面我们打开 APP.vue 文件，代码如下（解释在注释中）：
src/APP.vue

<!-- 展示模板 -->
<template><div id="app"><img src="./assets/logo.png"><hello></hello></div>
</template><script>
// 导入组件
import Hello from './components/Hello'export default {name: 'app',components: {Hello}
}
</script>
<!-- 样式代码 -->
<style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

接下来我们可以尝试修改下初始化的项目，将 Hello.vue 修改为以下代码：
src/components/Hello.vue

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'hello',data () {return {msg: '欢迎来到菜鸟教程！'}}
}
</script>

重新打开页面 http://localhost:8080/，一般修改后会自动刷新，显示效果如下所示:

Vue.js 目录结构相关推荐

vue php 架构目录,Vue.js 目录结构
Vue.js 目录结构上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Atom等) 中打开该目录,结构如下所示: 目录解析目录/文件说明build项目构建(webpack)相 ...
Vue基础目录结构与代码
作者简介:一名计算机萌新.前来进行学习VUE,让我们一起进步吧. 座右铭:低头赶路,敬事如仪个人主页:我叫于豆豆吖的主页目录前言一.Vue.js 目录结构 1.目录解析二.Vue.js ...
【Vue前端开发学习】第2章，Vue项目目录结构
文章目录前言一.新增router文件夹及其配置方法二.新增store文件夹及其配置方法三.index.html.App.vue.main.js三者之间的联系前言上一章节,通过Pycha ...
Vue项目目录结构介绍（三）
前言本章我们会对一个 Vue 项目的目录结构进行讲解,解释各子目录以及文件的作用,前端的模块化,Vue 单文件组件规范等. 1.基础目录和文件介绍在上一章,我们通过 vue-cli 创建了一个新的 ...
Vue项目目录结构介绍讲解
1.Vue单文件组件 node_modules:依赖的node工具包目录 public: 一般用于存放一些静态资源文件,例如图片,视频,音频等资源文件.需要特别注意的是webpack在进行打包的时候, ...
Vue项目目录结构注解附assets与static目录的区别
static与assets的区别: 为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loa ...
vue框架目录结构（全）
使用vue init webpack 项目名称命令创建的vue-cli2的项目目录目录说明: bulid:项目构建相关代码 config:配置目录,包括端口号等 node_modules:npm加载 ...
VUE项目目录结构说明
最近做一些Vue后端开发的简单项目,,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两位的博客提供了很大的帮助 ...
vue项目目录结构详解
目录截图: 1. build:构建脚本目录 build.js ---- 生产环境构建脚本 build-server.js ---- 运行本地构建服务器,可以访问构建后的页面 dev-client.js ...

Vue.js 目录结构

目录解析

Vue.js 目录结构相关推荐

最新文章

热门文章