vue-cli目录结构分析

标签: vue-cli
10人阅读 评论(0) 收藏 举报
分类:

上面是一个vue-cli的目录结构(不带路由)

主要分析index.html main.js App.vue HelloWorld.vue的关系

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

里面有id为app的div

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

cli里面通过webpack将mian.js加载到index.html中,也就将该Vue实例绑定到index.html的div中,components属性定义子组件,

template模版在我前面的博客中讲过,template的优先级比el高,将<div id="app"></div>替换为<App></App>

经过上面一系列步骤,index.html中就变为<App></App>中的内容,App就是导入的组件,所以index.html就显示App.vue中的内容

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

这个一个组件,显示img与HelloWorld中的内容

HelloWorld.vue 显示主题内容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


查看评论

前端框架Vue(4)——vue-cli 目录结构

1、vue-cli 项目结构图2、目录分析目录/文件说明 bulid项目构建的一些 js 文件 config配置文件项,index.js 比较重要,打包上线需要修改配置 dist项目打包后的文件 no...
  • DOCALLEN
  • DOCALLEN
  • 2017-04-05 10:32:18
  • 2300

vue-cli目录结构介绍

原文地址:http://www.jianshu.com/p/7006a663fb9f 总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其...
  • weixin_36185028
  • weixin_36185028
  • 2017-11-26 15:35:09
  • 913

vue-cli创建的项目的目录结构及说明

一、 ├── build              // 项目构建(webpack)相关代码             记忆:(够贱)    9个 │ ├── build.js       // 生...
  • qq_34543438
  • qq_34543438
  • 2017-06-05 16:34:59
  • 4225

vue-cli结合vuex架构目录

1、中型到大型项目目录结构(根据官方指导) 目录结构解释: build:文件是 webpack 的打包编译配置文件。 config:文件夹存放的是一些配置项,比如我们服务器访问的端口配置等 App....
  • ma6119780
  • ma6119780
  • 2017-05-22 13:56:49
  • 942

第三章 Vue-cli开启Vuejs项目(1)

第三章 Vue-cli开启Vuejs项目(1) Vue-cli是Vue的脚手架工具 Vue-cli就是帮助我们写好Vue.js基础代码的工具。它能够帮助我们完成目录结构、本地调试、代码部署、热...
  • hualala_32
  • hualala_32
  • 2018-02-06 17:53:47
  • 65

应用程序的目录结构分析

打算开学回校之后和
  • wonxxx
  • wonxxx
  • 2014-08-23 01:28:03
  • 696

vue.js开发外卖App项目总结(二)

vue.js开发利器:vue-clivue-cli是vue.js的脚手架工具,在工程中,脚手架是帮我们编写好基础代码,所以vue-cli是帮我们写好vue.js基础代码的工具。帮我们搞定目录结构,本地...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017-10-01 17:39:51
  • 377

Discuz!目录结构分析

  • 2011年09月25日 10:50
  • 9KB
  • 下载

Eclipse下项目目录结构的一点浅薄分析

Eclipse下建立的Android项目通常会有 Android+版本, Android Private Libraries, Android Dependencies, src, gen ,asse...
  • cobbwho
  • cobbwho
  • 2017-01-11 20:37:49
  • 1137

Android源代码分析(一) 目录结构分析

Google提供的Android包含了原始Android的目标机代码,主机编译工具、仿真环境,下载的代码包经过解压后(这里是Android2.2的源码包),源代码的第一层目录结构如下: |-- Ma...
  • wulianghuan
  • wulianghuan
  • 2013-10-04 16:27:44
  • 15825
    个人资料
    持之以恒
    等级:
    访问量: 5万+
    积分: 1367
    排名: 3万+
    最新评论