Vue+webpack单页面网站项目实战步骤分解

搭建基于vue+webpack单项目开发环境

(参考安装文档：https://cn.vuejs.org/v2/guide/installation.html)

一、基于vue+webpack的初始项目 目录分析

build  -- 打包要用的配置文件
config -- 框架的配置文件
dist   -- 将来打包成成的文件(上传的文件)
node-modules -- 模块文件
​
src    -- 前端开发的资源目录
    components -- 组件 **** 找对应组件放对应的数据
    router -- 路由跳转页面
    App.vue -- 框架最大的组件
​
static -- 静态文件：css js
index.html -- 首页

二、基于vue+webpack项目的执行流程分析

需求：

1>. 修改首页logo图标

// 修改App.vue 组件文件
<template>
  <div id="app">
      <!--注释img标签-->
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>