Vue项目创建和配置文件关系调用

1. Vue项目构建

• 首先默认安装了node.js和vue-cli，接下来直接使用脚手架创建项目：

 1 | vue init webpack Demo // Demo是自定义项目跟目录名，无此目录则自动创建

• 接下来会进行一系列配置询问，看图：
  

• 配置完回车，项目脚手架自动生成完毕
  

• 进入Demo文件夹，启动项目试试：

cd Demo
npm start // 推荐使用npm run dev，该命令完整webpack环境可使用（webpack-simple环境无法使用），具体可在配置文件package.json中查看：

• 启动项目后提示已经运行在本地8080端口，直接浏览器跑起来：
  

2.项目文件配置

• 其实项目生成的很多配置文件大多不需要修改，主要修改的地方是src目录下的一些配置文件：
  
  这个页面 是整个项目的核心，可以看到它创建了一个Vue实例挂载到index.html页面中，其中就注册了App.vue组件和router目录下的路由，这个页面也不需要修改。

3.基本项目搭建完成，接下来分析调用关系

• 使用到vue项目的文件包括一个.html，两个.js，两个.vue文件，关系如上图所示
• 由图可见，文件关键处在于main.js，管理着所有需要的资源，其中new Vue的参数，解释如下：
• el：官方解释为实例提供挂载的元素。此处为index.html中的
  。
• router：为router:router的简写（ES6语法），指向引入文件中的routes:[]。
• components：注册哪些组件，就要在顶部引入文件。
  template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用替换index.html里面的

此时，可知main.js文件调用关系分为三步，如图中序号：

1. 确定将被挂载（替换）的元素，此处为index.html中的
   。
2. 注册组件（此处只有组件App），选择其中用于替换挂载元素（第一步中的元素）的模板组件（），即用App.vue替换index.html中的
   。
3. 注册路由器router：
   1. 模板组件（App.vue）中有，将在其中渲染路由匹配到的组件
   2. 注入（import）路由时指定的是router文件夹，即文件夹下所有routes
   3. router文件夹下此时只有index.js文件，其中routes:[]规定了文件地址及其url地址映射
   4. 根据文件地址，载入组件（HelloWorld.vue），组件被渲染在中，显示在index.html中

然而追本溯源，调用关系中仍有两个问题：

1. 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
        }),

2. 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项目创建及配置文件修改和调用关系的说明