【Vue前端开发学习】第2章，Vue项目目录结构

前言

  上一章节，通过Pycharm创建了一个新的Vue项目（vue-cli版本为 @vue/cli 4.5.11，vue版本为2.6.11），获得如下图所示的初始化Vue项目目录，为了保持结构一致、便于理解和构建管理，后续的学习和开发也将遵循Vue相关的目录结构规范进行。

提示：
1）从 vue-cli3.0 开始 build 和 config 目录就取消了，所有的配置都在vue.config.js完成，在项目根目录下执行命令 “npm i -d vue-cli-configjs” 进行添加，注意里面需要安装的依赖。
2）因为在使用Pycharm创建项目时，勾选了 “Use the default project setup (babel, eslint)”，因此创建出来的项目默认没有 ~/src/router/ 文件夹，需要在项目根目录下执行命令 “npm install vue-router --save” 手动安装 vue-router 模块，并执行命令 “vue add router（安装过程中会提示，是否在路由中使用历史模式，路由分为历史模式和hash模式）”，会自动创建 _{/src/router/和}/src/views/ 文件夹、配置App.vue文件。

一、新增router文件夹及其配置方法

  由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
  为什么不能像原来一样直接用a标签编写链接呢？因为一般用Vue做的都是单页应用，只有一个主页面index.html，所以你写的标签是不起作用的，要使用vue-router来进行管理。

1、在{项目路径}/src/router/index.js中添加一路由

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },

  //  新建一个路由 demo1
  {
    path: '/demo1',
    name: 'demo1',
    component: () => import('../views/Demo1.vue')
  }
]

2、在App.vue 中添加 <router-link to="/demo1">Demo1</router-link>

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <!-- 新增一个路由 demo1 -->
      <router-link to="/demo1">Demo1</router-link>
    </div>
    <router-view/>
  </div>
</template>

3、在 ~/src/views/ 目录下创建Demo1.vue文件

提示：
1）一个.vue文件是一个封装的组件，在.vue文件里可以写 html, css, js，其中template 中写html 代码，其实就是定义模板。
2）各个.vue之间样式不是独立的，同一选择器在不同的.vue里只要满足选中的条件就可以起作用。
3）不使用.vue 单文件时，通过 Vue 构造函数 创建一个 Vue 根实例来启动vuejs 。.vue文件中不用Vue创建实例，用export default 。 .vue文件中 export default 后面的对象 就相当于 new Vue() 构造函数中的接受的对象。
4）可以在.vue文件中引入less等外部插件。

<template>
  <div class="test">
    <h1>This is an Demo1 page</h1>
  </div>
</template>

<script>
export default {
name: "Demo1"
}
</script>

<style scoped>

</style>

4、运行项目，查看页面，已成功添加一个新的路由及其对应的页面

二、新增store文件夹及其配置方法

（持续学习更新中……）

三、index.html、App.vue、main.js三者之间的联系

1、index.html为项目主页入口，会首先被打开

提示：
1）在index.html中定义了一个 <div id=“app”/> 标签，会在main.js中被创建出来的Vue实例挂载覆盖，其他比如<title/>标签中的内容不会被覆盖。
2）main.js没有在html中进行引用，因为Webpack编译出来的css,js等文件，将main.js自动注入到此html中。

2、main.js作为入口JavaScript脚本，定义了一个Vue根实例

提示：根实例包含
1）路由目录的引入
2）App.vue模板的引入
3）app挂载点的声明

3、App.vue作为根组件，模板标签<template/>下的内容将会替换掉index.html文件中的<div id=“app”>标签

提示：<template/>只允许有1个<div/>标签，超过1个则会报错

4、总结：在项目运行开始，先默认打开index.html文件，然后会调用main.js中的脚本，将App.vue根组件和router（此处额外加了路由）中的内容覆盖到index.html中，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。




参考链接：
1、《Vue项目目录架构》
2、《Vue.js 目录结构》
3、《Vue cli 4.x Vue.config.js标准配置(最全注释)》
4、《使用vue create、vue webpack init 创建vue项目产生的项目文件区别说明》
5、《使用webpack创建vue项目，安装vue-router和不安装vue-router的区别》
6、《vue-router（路由）详细教程》
7、《关于Vue中main.js，App.vue，index.html之间关系进行总结》