【VUE学习笔记1】Vue.js项目结构说明
本文章作为VUE学习过程中的个人总结笔记,方便以后学习查看。参考了网上的多种资料,如有雷同或者侵权请告知,谢谢。
一、项目结构如下
二、目录结构说明
--build:项目构建的相关代码,与webpack有关的参数
--config:项目的基本配置文件,包括目录、端口等
--node_modules:VUE项目依赖模块
--src:源码文件,包括如下几部分
assets: 放置一些静态资源,如图片、logo等
components:
放置组件
App.vue
:第一个组件App.vue
main.js:
入口文件
--static:静态文件放置目录,图片等
--test:测试目录,一般没用
--.XXXX文件都是一些配置文件,如下
.babelrc:vue开发babel编译相关参数
.editorconfig :编辑器配置文件
.gitignore :git版本控制的相关文件
--index.html 首页入口文件,可添加一些 meta 信息等。
--package.json :项目配置文件,包括一些命令(scripts)、项目发布依赖(dependencies)、项目开发依赖(devDependencies)
--REAME.md :项目介绍文档 支持markdown
三、详细介绍
1、index.html
index中的body,有一个id为app的div被渲染
2、main.js
main.js是入口文件,初始化vue实例和插件。
/*引入Vue框架*/
import Vue from 'vue'
/*基本JS*/
import "assets/js/common.js"
/*引入路由设置*/
import "./routers.js"
Vue.config.productionTip = false
/*引入element组件*/
import ElementUI from 'element-ui';
/*重置样式*/
import 'element-ui/lib/theme-chalk/index.css';
/*使用element组件*/
Vue.use(ElementUI);
/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*使用VueResource插件*/
Vue.use(VueResource)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
new Vue:新建vue对象
el:为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。
这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。
components:组件。这里是组件APP,对应文件App.vue,页面通过<app></app>
渲染。注意:index.html中没有这个标签,原因看下面分析。
template:模板。模板将会替换挂载的元素,挂载元素的内容都将被忽略。意思是:template: '<App/>'
表示用<app></app>
替换index.html
里面的<div id="app"></div>
3、App.vue
标准的vue组件,包含模板(template)、脚本(script)、样式(style)三个部分。
<!-- 展示模板 -->
<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>标签是图片,代表logo一类的。
<HelloWorld/> 组件,具体查看HelloWorld.vue,就是要渲染的东西。
四、总结
个人理解:
- 整个逻辑:入口文件main.js 通过<div id="app"></div>在 index.html中渲染,main.js中通过components: { App }来看App.vue,App.vue中<img>标签代表logo,<HelloWorld/> 组件,具体查看HelloWorld.vue,就是要渲染的东西。