当我们用npm生成一个项目的时候，我们要了解这个项目的文件
1.index.html 是所有HTML的入口，点开该index.html 可以看到：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>hellovue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>2.这个app组件注册在src的main.js里面，点开main.js文件：
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
render:h => h(App)
});
//import Vue from 'vue'
//会从node_modules中取Vue框架的东西
//import App from './App'
//实际上同级目录下的from‘./App.vue’
//import 是ES6的语法，相当于 var app = require(./App")
//作为一个app 引入当前文件下这个组件被注册以后，就可以html中使用了
打开App.vue我们可以看到：
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
data(){
return{
}
}
</script>
<style>
}
</style>
// export会自动生成new Vue（{}）Vue的一个参数，我们把default的东西当作是Vue的一些参数和属性即可
//这里的data(){} 是ES6的语法，相当于
function data (){
return{
msg:"Hello World!"
}}
//但是还是推荐使用Vue ES6的写法3.项目详细介绍：
README.md:项目的说明文件
.package.json文件：里面有很多第三方依赖包
package.lock.json：帮我们确定安装的依赖包的版本，保持团队编程的统一
LICENSE:开源协议的说明
index.html：使我们项目默认的首页的模板文件
postcssrc.js:是对postcss的一个配置项
Gitignore：设置Git提交到线上，有些文件可以不被提交
eslintrc.js：配置了代码的规范
eslintinore:里面的内容不规则也不会被检测。
editorconfig:配置了编辑器的语法
babelrc:项目写的代码，是Vue的单文件代码，所以需要babel做语法转换，最终转换成浏览器能够编译的代码。
static：放的是静态资源，放置一些静态的图片啊，以及模拟的json数据
node_modules：是我们项目依赖的第三方依赖包
src:放的是我们装个项目的源代码
① main.js：放的是我们整个项目的入口文件
②.APP.vue是我们项目最原始的根组件
③.router：项目的所有的路由，都放在router的index.js文件
④. components :放的是我们项目要用的小组件
⑤.assets:放置的是我们项目要用的图片
config：放置的是项目的配置文件
①. index.js： 基础的配置信息放置在index.js文件中
②.dev.env.js：开发环境的配置信息放置在此文件中
③.prod.env.js：线上的配置信息配置在此文件中
build：放置的是打包工具webpack的一些内容，一般不需要修改。
附：
我们把文件后缀名为.vue的文件称之为单文件组件，实际上里面放的是Vue的组件
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
