一.目录结构
使用IDEA打开这个项目
build -- 主要是webpack的配置
config -- 基本的配置
node_modules -- 项目依赖包
src -- 项目源码(我们主要在这个里面开发)
static -- 存放静态文件的
.babelre -- babel配置文件
.editorconfig -- 编辑格式配置（例如Tab键为几个空格）
.gitignore -- git忽略文件配置
.postcssrc.js
.index.html -- 一个标准的html文件（单页面）
package.json -- 项目的描述，依赖的文件配置等等
README.md -- 项目的描述
二. 部分文件及配置的具体讲解
/config/index.js，此文件下有一个dev节点，dev节点下有两个属性较为常用。
-port:启动应用的端口号设置
-autoOpenBrowser:执行npm run dev命令后是否自动打开浏览器/src/router/index.js
路由配置，意思是：访问根目录，即展示HelloWorld.vue这个组件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
/src/main.js项目入口文件，一般可以在此文件中定义一些全局的变量index.html所有组件构成的页面最终都会被添加在这个文件中（通过js进行渲染），当路由跳转时，文件里的元素节点会进行替换。（打开浏览器的调试界面，可以看到，如果你在这个文件里写一点注释，不管你访问哪个路由，注释都能看到）/package.json（非常重要的东西）
{
"name": "my-project", //项目名称
"version": "1.0.0", //版本
"description": "A Vue.js project", //项目描述
"author": "sifu <[email protected]>", //项目作者
"private": true, //是否为私有
//脚本配置
"scripts": {
// 当我们执行npm run dev时实际上是执行webpack-dev-server --inline --progress --config build/webpack.dev.conf.js命令
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
//当我们执行npm run start时，实际上是执行npm run dev（同上）
"start": "npm run dev",
//同上
"build": "node build/build.js"
},
//项目依赖包
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
//项目开发时依赖包
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
......
}
}
dependencies与devDependencies节点的区别：
dependencies:项目打包时，会将此节点下依赖的包打包进去devDependencies:项目打包时，不会将此节点下依赖的包打包进去，例如babel这个工具包，只是将es6的语法转化成es5的语法，在打包的时候才会使用，运行时并不会用到。
用比喻来说明一下这个package.json的作用
蛋糕的说明书(纯属为了解释，请勿模仿，不然会做出黑暗料理来的哦)：
原料：鸡蛋、牛奶、白糖、面粉 （类似dependencies节点的依赖，完成时，这些原料就是成品中的一部分）
器材：电动打蛋器、电饭锅、筛子、碗(类似devDependencies节点的依赖，完成时，这些并不是成品的一部分，只是我们在制作过程中需要使用的工具而已)
步骤和方法： (类似scripts节点)
1.分离蛋黄和蛋清，将其分别放到干净无油无水的大碗中(类似dev)
2.筷子三根，将2~3汤匙的白糖加到蛋清里，再加入一点盐，直到打发成硬性泡沫，也就是盆子倒扣蛋白都不会掉下来的状态。(类似start)
........
产品名称: 蛋糕（类似name）
产品描述：美味的蛋糕 （类似description）
制作时间：***** （类似version）
联系方式：***** （类似author）
是不是感觉我们做开发，相当于是在做一个蛋糕一样呢？
注：由于个人不才，有些配置我自己也不太明白，只写出自己知道的，且重要常用的配置解释，其他配置在此就不做过多的解释，以免误导大家
（如有错误或者问题，请在评论区指出或提出，感谢！！）