Vue项目结构分析

Vue项目结构分析

1.概览

使用 CLI 构建出来的 Vue 项目结构是这样的

Vue项目结构分析_第1张图片

里面我们需要关注的内容如下图,重点需要关注的用小红旗标了,

Vue项目结构分析_第2张图片

其中我们最常修改的部分就是 components 文件夹了,几乎所有需要手动编写的代码都在其中。

接下来我们分析几个文件,目的是理解各个部分是怎么联系到一起的。

2.index.html

首页文件的初始代码如下:


<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>wj-vuetitle>
  head>
  <body>
    <div id="app">div>
    
  body>
html>

就是一个普普通通的 html 文件,让它不平凡的是

,下面有一行注释,构建的文件将会被自动注入,也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是,整个项目只有这一个 html 文件,所以这是一个 单页面应用,当我们打开这个应用,表面上可以有很多页面,实际上它们都只不过在一个 div 中。

3.App.vue

上面图上我把这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。

.vue 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件。先看它的初始代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  div>
template>

<script>
export default {
  name: 'App'
}
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>

大家可能注意到了,这里也有一句

,但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

你可能感兴趣的:(1,vue)