1. Vue项目构建
- 首先默认安装了node.js和vue-cli，接下来直接使用脚手架创建项目：
vue init webpack Demo // Demo是自定义项目跟目录名，无此目录则自动创建
-
接下来会进行一系列配置询问，看图：
项目配置 -
配置完回车，项目脚手架自动生成完毕
脚手架 - 进入Demo文件夹，启动项目试试：
cd Demo
npm start // 推荐使用npm run dev，该命令完整webpack环境可使用（webpack-simple环境无法使用），具体可在配置文件package.json中查看：
启动路径
-
启动项目后提示已经运行在本地8080端口，直接浏览器跑起来：
项目启动
默认启动页面
2.项目文件配置
-
首先编辑器打开项目创建的文件夹，或者叫Github / 码云拉下来的仓库：
本地仓库
这其中有很多的配置文件，具体有什么用这里不过多描述否则文章太长我也受不了...而上图选中的index.html就是默认加载的首页。 -
其实项目生成的很多配置文件大多不需要修改，主要修改的地方是src目录下的一些配置文件：
main.js
这个页面 是整个项目的核心，可以看到它创建了一个Vue实例挂载到index.html页面中，其中就注册了App.vue组件和router目录下的路由，这个页面也不需要修改。 -
接下来看App.vue这个文件：
App.vue组件 -
这个组件呢就使用了我们的组件模板直接替换掉了
index.html中的<div id="app"></div>，所以这里我们把配置改成：
App.vue
把默认的内容和样式都去掉，留下路由即可（<router-view/>）
这里再说一个注意点：一旦开启了ESLint，时刻注意代码规范（自行百度规则），不过.eslintignore文件中的路径下的文件将不会检查，一旦语法不规范，你的页面控制台和终端都会报错，这里根据提示的地方修改即可。 -
既然根组件保留了路由内容，那么就是router目录下的index.js文件：
index.js
这里就显示了根路径下的内容（组件），默认加载的是HelloWorld组件（从src目录下的components目录下的Hellow.vue中导入），因此这里把圈掉的干掉，在重新配置根目录加载的内容即可，最后自定义放组件的目录（默认情况不会使用components目录而是自行创建，在通过同样的方式引入即可）。
index.js
- 接下来重新配置首页（根路径下加载的组件）和路由：
image.png
这里配置了一个路由，当页面跳转到
localhost:8080/list目录下时，页面将跳转（加载List组件），组件配置模板如下：
组件模板
为了证明配置成功，附图2张（主页和路由配置的新页面）：
1
2
3.基本项目搭建完成，接下来分析调用关系
人家的图，希望不要被打死
- 使用到vue项目的文件包括一个
.html，两个.js，两个.vue文件，关系如上图所示 - 由图可见，文件关键处在于
main.js，管理着所有需要的资源，其中new Vue的参数，解释如下： - el：官方解释为实例提供挂载的元素。此处为
index.html中的<div id="app"><div>。 - router：为router:router的简写（ES6语法），指向引入文件中的
routes:[]。 - components：注册哪些组件，就要在顶部引入文件。
template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用<template>替换index.html里面的<div id="app"></div>
此时，可知main.js文件调用关系分为三步，如图中序号：
- 确定将被挂载（替换）的元素，此处为
index.html中的<div id="app"><div>。 - 注册组件（此处只有组件App），选择其中用于替换挂载元素（第一步中的元素）的模板组件（
<App/>），即用App.vue替换index.html中的<div id="app"><div>。 - 注册路由器router：
- 模板组件（App.vue）中有
<router-view/>，将在其中渲染路由匹配到的组件 - 注入（import）路由时指定的是router文件夹，即文件夹下所有routes
- router文件夹下此时只有
index.js文件，其中routes:[]规定了文件地址及其url地址映射 - 根据文件地址，载入组件（
HelloWorld.vue），组件被渲染在<router-view/>中，显示在index.html中
- 模板组件（App.vue）中有
然而追本溯源，调用关系中仍有两个问题：
-
index.html为何默认显示？
其实，双击执行npm中dev时，控制台将执行如下语句：
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
由此可见，运行时启动文件webpack.dev.conf.js，而文件中包含如下语句，规定了起始页面：
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
-
main.js为何默认加载？
因为使用的脚手架工具vue-cli里用webpack来打包项目文件，webpack.dev.conf文件里还定义了webpack基础配置文件webpack.base.conf.js，定义语句如下：
const baseWebpackConfig = require('./webpack.base.conf')
而文件webpack.base.conf.js中，包含如下语句，指定了入口：
entry: {
app: './src/main.js'
}
总结：
- 以上就是一个完整的Vue项目创建及配置文件修改和调用关系的说明，喜欢的小伙伴就点个喜欢吧，博主也不容易！
