分析vue的目录和项目代码

原创 2018年04月04日 15:34:28

前面一节我们讲了vue的项目搭建过程,这一节我们就来细说一下项目里面的文件。先大概说一下,后面有时间再详细说。
这里写图片描述

1.首先看主页面入口index.html页面:
这里写图片描述

我们可以看到,入口页面基本没有什么,就定义了一个div标签,绑定了一个id,用来设置作用域。

2.文件:HelloWorld.vue
这里写图片描述

这个文件也没什么可以说的,一个template的展示模板,一个script引入组件,还有个style编写样式代码。

值得注意的是,template模板直接子级不能一样。比如下图:
这里写图片描述

template下面直接子级还是template的话就会报错,组件只能有一个根元素,就是你这第一个下面必须只有一个根元素,可以使用一个容器元素包裹住,例如:
这里写图片描述

3.文件:main.js
这个js文件是主页面配置的主入口,引入一些模块。

这里写图片描述

4.文件: index.js
这个js文件是配置路由的页面。
这里写图片描述

vue脚手架的使用记录及目录文件解读

1、安装脚手架:npm install -g vue-cli 2、创建工作空间,切换到目录下执行:vue init webpack project_name(项目名称) 3、初始化操作: ...
  • ai834398016
  • ai834398016
  • 2017-12-09 10:49:35
  • 145

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

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

codeigniter 入门项目

现在,您已经安装和配置了 CodeIgniter,接下来即可构建项目,这项工作至少要占用一个小时的时间。 这一次,我们不会构建 Hello World 应用程序,而是使用 CodeIgnit...
  • tashanhongye
  • tashanhongye
  • 2015-12-23 16:36:33
  • 617

vue-cli目录结构介绍

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

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

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

vue饿了么学习-第一篇(搭建项目/结构/列表)

1.创建饿了么目录   cnpm install -g vue-cli   vue init webpack imoc(name)   cd imoc   cnpm install ...
  • qq_21036015
  • qq_21036015
  • 2017-09-05 16:14:51
  • 308

Cocos2d-JS项目结构介绍

参考:Cocos2d-JS项目结构介绍使用命令创建好工程后,使用WebStorm打开,结构如下:一.下面讲解各个文件、目录的作用: frameworks:包含Web引擎以及Native引擎 1.co...
  • weichuang_1
  • weichuang_1
  • 2015-10-20 23:46:50
  • 451

Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构

Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》,我们已经新建好了一个基于...
  • FungLeo
  • FungLeo
  • 2016-11-15 15:17:42
  • 42485

vue 9.5 汉化包

  • 2013年12月21日 17:52
  • 3.94MB
  • 下载

Vue 脚手架搭建目录及文件详解

vue脚手架搭建在各大前端网站都有详解,这里就不多作介绍,此文章主要介绍脚手架搭建后的目录结构,以及配置文件的详解。1. 目录结构目录结构如下:我们来介绍一下这些目录:一级目录build: webpa...
  • Q_Jack521
  • Q_Jack521
  • 2018-02-28 10:34:24
  • 275
收藏助手
不良信息举报
您举报文章:分析vue的目录和项目代码
举报原因:
原因补充:

(最多只允许输入30个字)