开心档之Vue.js目录结构

简介: 开心档之Vue.js目录结构

Vue.js 目录结构

上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse、Atom等) 中打开该目录,结构如下所示:


目录解析

目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块

image.png

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/,一般修改后会自动刷新,显示效果如下所示:

目录
相关文章
|
6月前
|
前端开发 应用服务中间件 nginx
Next.js 创建项目到服务器部署(目录结构介绍、项目结构Demo、开发细节注意)
Next.js 创建项目到服务器部署(目录结构介绍、项目结构Demo、开发细节注意)
902 0
|
3月前
|
JavaScript
Vue项目如何生成树形目录结构
这篇文章介绍了如何在Vue项目中生成树形目录结构,通过安装并使用`mddir`命令行工具来创建一个`directoryList.md`文件,从而快速获取项目的树形目录列表。
Vue项目如何生成树形目录结构
|
3月前
|
JavaScript
Vue——Vue v2.7.14 源码阅读之代码目录结构【一】
Vue——Vue v2.7.14 源码阅读之代码目录结构【一】
76 0
|
6月前
|
JavaScript 前端开发 测试技术
详细介绍 Vue3 的常见目录结构
详细介绍 Vue3 的常见目录结构
719 2
|
JavaScript
开心档之vue.js组件
开心档之vue.js组件
48 0
|
6月前
|
JavaScript
node.js输入项目目录结构并展示
node.js输入项目目录结构并展示
44 0
|
6月前
|
JavaScript 开发工具 git
Vue.js 目录结构
Vue.js 目录结构
|
6月前
|
JavaScript 前端开发 IDE
Vue3【为什么选择Vue框架、Vue简介 、Vue API 风格 、Vue开发前的准备 、Vue项目目录结构 、模板语法、属性绑定 、 】(一)-全面详解(学习总结---从入门到深化)
Vue3【为什么选择Vue框架、Vue简介 、Vue API 风格 、Vue开发前的准备 、Vue项目目录结构 、模板语法、属性绑定 、 】(一)-全面详解(学习总结---从入门到深化)
94 1
|
JavaScript 前端开发
开心档之Vue.js 样式绑定
开心档之Vue.js 样式绑定
57 2
|
11月前
|
JavaScript
【Vue】—项目的目录结构介绍
【Vue】—项目的目录结构介绍