新建一个项目之后，我们来看一下项目的目录结构

几个主要文件的内容
  • index.html文件（入口文件，系统进入之后先进入index.html）
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>blog</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>
  • main.js文件（导入相应的模块）
improt Vue from 'vue'       //可以将脚手架中下载的模块拿出来，可以直接使用new来实例化vue对象

improt App from './App'

Vue.config.productionTip = false

 new Vue({

   el:'#app',              //当前的vue要控制的容器是谁，要获取的这个容器元素是谁，#app是index.thml里的id=“app”

   template:'<App/>',      //模板，可以写对应的div，也可以写组件调用的标签，只要有一个根标签即可

    components:{ App }      //想要调用组件，必须在component里注册这个组件，这里的APP来源于引入的./App文件，即：App.vue文件

 })
  • App.vue文件（根组件）
<!--1模板：html结构 -->

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <!--路由入口，对应进入router下面的index.js文件-->

    <router-view/>

  </div>

</template>

<!--2行为：处理逻辑 -->

<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>
  • router文件夹下面的index.js文件（前端路由）
import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'   //导入模板文件

Vue.use(Router)

export default new Router({

  routes: [   //定义对应模板的路径，url对应进入的模板

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    }

  ]

})
模板：

　　template可以用它去包括一些内容，它本身并不会真正的渲染到dom里面去，可以直接使用template标签包括起来，注意：template里有且只能有一个根标签。

行为：

　　通过import来跟别的组件进行关联，然后通过

  export default {

   name: 'App',

   components: {

    HelloWorld

  }

注册一下就可以调用了。

样式：

　　跟普通css样式一样。可以使用sass语法，但是要在项目中安装一下sass，安装成功之后可以在package.json里面看到对应的信息

项目加载过程

　　项目开始：index.html ----> main.js ----> App.vue

　　由index.html入口文件，他会执行main.js文件，main.js会实例化我们的Vue对象，接下来会执行App.vue组件，到了App.vue以后，如果模板有内容的话，他会将模板中的内容插入到index.html的容器当中，也可以在行为属性里设置对应的属性。

vue初尝试--项目结构的更多相关文章

  1. vue初尝试--新建项目

    这是一篇技术贴--如何新建一个基于vue的项目 1.下载对应版本的nodejs安装,下载的nodejs都集成了npm,所以nodejs安装完成之后npm也对应安装完成了. 安装完成之后可以在cmd命令 ...

  2. vue初尝试--组件

    github代码同步网址 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添 ...

  3. VScode开发Vue初尝试（一）

    由于公司近期有新的H5项目开发,而前端的同事也离职了,所以就临时顶缸,研究学习一下Vue框架开发. 本人也是初学,在学习过程中,把一些学习所得分享出来,可能会有很多问题和疏漏,希望大家能够多多指正,共 ...

  4. Vue+Iview+Node 项目结构和配置

    1.项目调整后的目录 api:数据接口定义 assets:静态文件 components:组件  config:项目相关配置  driective:指令   router:路由   store:状态管 ...

  5. vue系列之项目结构

    参考地址:链接 build webpack配置相关 config webpack配置相关 node_modules  npm install 安装的依赖代码库 src  存放项目源码 static 存 ...

  6. vue学习记录①（vue-cli脚手架构建项目结构）

    我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win ...

  7. vue的项目结构记录

    vue的项目结构 不知道大家有没这样的情况,面对刚配置好的脚手架,创建的文件不知道该放哪个文件下,导致后面开发一些文件不好找,不利于维护. 接下来我说说我项目中的一些文件: 首先是components ...

  8. 【vue】vue前端项目结构

    [一]项目结构 [二]项目结构释意 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm ...

  9. Vue.js系列之项目结构说明

    转:https://www.jb51.net/article/111658.htm 前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli ...

随机推荐

  1. 【Spring源码分析】配置文件读取流程

    前言 Spring配置文件读取流程本来是和http://www.cnblogs.com/xrq730/p/6285358.html一文放在一起的,这两天在看Spring自定义标签的时候,感觉对Spri ...

  2. window.close(); 关闭浏览器窗口js代码

    序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome,safari Opera Close 2 window.opener=nu ...

  3. UWP：使用Composition实现类似安卓的水波纹Ripple效果

    先放效果图: 首先,建立一个RippleHelper.cs文件,然后建立以下附加属性: IsFillEnable:是否扩大到整个控件 RippleDuration:持续时间 RippleRadius: ...

  4. cocos creator实现棋牌游戏滑动选牌的功能

    最近在玩cocos creator,打算学着做一款类似双扣游戏的棋牌,名字叫文成三星,比双扣还要多一扣,因为需要三幅牌,在我们老家比较流行这种玩法. 目前实现了绝大部分的逻辑效果如下: 有一点不好的体 ...

  5. ngrx/store effects 使用总结1：计数器

    本教程案例github:https://github.com/axel10/ngrx_demo-counter-and-list angular2+ 的学习成本应该是三大框架中最高的一个,教程及案例稀 ...

  6. Problem : 1002 ( A + B Problem II )

    经验总结:一定要注意输出的格式,字符的空格,空行,一定要观察清楚.如本题的最后一个输出结果后面没有空行.最后代码实现的时候需要判断一下,代码如下 !=n) cout<<endl; Prob ...

  7. shell脚本中的整数测试

    shell脚本中的整数测试 author:headsen chen      2017-10-17   13:58:12 个人原创,转载请注明作者,出处,否则依法追究法律责任 1,test用法:tes ...

  8. LNMP+FARM+DNS

    LNMP 1.安装Nginx前的环境. # yum -y install gcc gcc-c++ pcre-devel zlib-devel openssl-devel   2.添加www系统用户,在 ...

  9. Java 常用单词

    1.Object-Oriented ['əbdʒekt'ɔ:rɪəntɪd] 面向对象 adj 2.inheritance  [ɪnˈherɪtəns]  继承;遗传;遗产 n inherit  [ɪ ...

  10. nodejs简单数据迁移demo

    近期做数据迁移,采用nodejs框架,数据库为mysql.作为一枚菜鸟,在编码过程中,遇到众多奇葩问题,感谢民少给予的支持. 由于旧数据库中的数据,在之前设计中存在众多不合理的情况,因此在数据迁移中, ...