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

文章目录

前言

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

提示：

1）从 vue-cli3.0 开始 build 和 目录就取消了，所有的配置都在vue..js完成，在项目根目录下执行命令 “npm i -d vue-cli-” 进行添加，注意里面需要安装的依赖。

2）因为在使用创建项目时，勾选了 “Use the setup (babel, )”，因此创建出来的项目默认没有 ~/src// 文件夹，需要在项目根目录下执行命令 “npm vue- --save” 手动安装 vue- 模块，并执行命令 “vue add （安装过程中会提示，是否在路由中使用历史模式，路由分为历史模式和hash模式）”，会自动创建 /src//和/src/views/ 文件夹、配置App.vue文件。

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

由于Vue在开发时对路由支持的不足，于是官方补充了vue-插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-就是我们的链接路径管理系统。

为什么不能像原来一样直接用a标签编写链接呢？因为一般用Vue做的都是单页应用，只有一个主页面index.html，所以你写的标签是不起作用的，要使用vue-来进行管理。

1、在{项目路径}/src//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，其中 中写html 代码，其实就是定义模板。

2）各个.vue之间样式不是独立的，同一选择器在不同的.vue里只要满足选中的条件就可以起作用。

3）不使用.vue 单文件时，通过 Vue 构造函数 创建一个 Vue 根实例来启动vuejs 。.vue文件中不用Vue创建实例，用 。 .vue文件中 后面的对象 就相当于 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实例挂载覆盖，其他比如标签中的内容不会被覆盖。

2）main.js没有在html中进行引用，因为编译出来的css,js等文件，将main.js自动注入到此html中。

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

提示：根实例包含

1）路由目录的引入

2）App.vue模板的引入