【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 中添加 Demo1

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Homerouter-link> |
      <router-link to="/about">Aboutrouter-link> |
      
      <router-link to="/demo1">Demo1router-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 pageh1>
  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中定义了一个

标签，会在main.js中被创建出来的Vue实例挂载覆盖，其他比如