Vue.js系列项目结构描述(二)

描述：

我们的项目现在使用：vue 2.0 vue-CLI web pack vue-router 2.0 vue-resource 1 . 0 . 3

如果实践与本文内容有较大差异，我们来看看是不是版本问题。

本文为系列文章，待我对Vue有了更深入的了解后会及时修改或更正。欢迎大家批评指出错误。以下是已完成文章的列表。

1.项目建设情况1。Vue.js系列(1)

简要介绍目录结构

构建目录是一些webpack文件、配置参数等。一般不动

Config是vue项目的基本配置文件

Node_modules是安装在项目中的依赖模块

Src源文件夹，基本上所有的文件都应该放在这里。

—资产资源文件夹，其中包含一些静态资源

—组件所有组件文件都放在这里

—App.vue App.vue组件

—main.js条目文件

静态生成的文件将放在这个目录中。

测试测试文件夹，测试写在这里。巴别塔编译参数，vue开发需要巴别塔编译

的名称。editorconfig是编辑器配置文件，但不知道是哪个编辑器，也没用过。gitignore用于过滤一些受版本控制的文件，例如node_modules文件夹

Index.html主页

Package.json项目文件，它记录了一些命令和依赖关系以及简短的项目描述信息

README.md介绍了自己这个项目，以及如何写。如果你不会写，可以参考github上明星比较多的项目，看看大家写的是什么

详细介绍几份文件

1.package.json

{ 'name': 'demo '，' version': '1.0.0 '，' description': 'A Vue.js项目'，' author': 'Luke.deng '，' private': true，' scripts': { 'dev': '节点build/dev-server.js '，' build': '节点build/build.js '，' e2e': '节点test/e2e/runner.js。 semver': '^5.3.0'，opn': '^4.0.2'，ora': '^0.3.0'，shelljs': '^0.7.4'，url-loader': '^0.5.7'，vue-loader': '^10.0.0'，vue-style-loader': '^1.0.0'，vue-template-compiler ' : '^2.1.0'，web pack ' : ' 1 . 13 . 2 '，web pack-dev-中间件' 3: ' 1 . 8 . 3 '，

依赖项：发布项目时的依赖项

开发依赖：项目开发中的依赖

脚本：一些用于编译项目的命令

2.babelrc文件

那个。babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时会被babel转码器转换成ES5代码。

{ '预设' : ['es2015 '，' stage-2 '，' plugins ' :[' transform-runtime ']，' comments ' : false } 3 . index . html

我们可以介绍文件，写基本信息，添加元标签等。就像普通的html文件。

！DOCTYPE html html head meta charset=' UTF-8 ' meta content=' yes ' name=' apple-mobile-web-app-ability '/meta content=' yes ' name=' apple-touch-full screen '/meta content=' phone=no，email=no ' name=' format-detection '/meta name=' viewport ' content=' width=device-width，user-scale=no，初始-scale=1.0，最大-scale=1.0，最小-scale=1.0' title华旗商学院/title/title

这是输入文件。可以引入一些插件或静态资源。当然，插件必须在引入之前安装，这记录在package.json文件中。

/*引入vue框架*/从' Vue '导入vue'/*从' vue-resource '导入Vue资源'/*重置样式*/导入' assets/CSS/base . CSS '/* basic JS */导入' assets/js/Common.js'/*导入路由设置*/*/import '。/routers . js '/*/*使用VueResource插件*/vue . use(vue resource)5 . app . vue。

这是一个标准的vue组件，包括三个部分，一个是模板，一个是脚本，一个是样式。在这里，我们需要知道vue的基础。

模板div id='app' img src='http:/assets/logo . png ' Hello/Hello/div/templatescript import Hello from '。/components/Hello ' export default { name : ' app '，components 3360 { Hello } }/script style # app { font-family : ' Avenir '，Helvetica，Arial，无衬线；-web kit-font-smooth :抗锯齿；-moz-OSX-font-smooth :灰度；文本对齐：中心；color : # 2c 3e 50；边距-top : 60px；}/样式摘要描述

我不只是把官方演示放在这里。我想解释一下，在webpack的配置文件中，main.js被设置为入口文件，我们的项目默认访问index.html。这个文件中的div id='app'/div与App.vue组件中的容器完全重合，也就是说，组件是挂载在索引页上的。那么我们只需要构建其他组件。我们还可以在App组件中引入、注册和应用其他组件。后面我会介绍如何通过路由来渲染App组件中的其他组件，这样我们只需要关注每个组件的功能完善性。

以上是边肖介绍的Vue.js系列的项目结构描述(2)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！