甘肃龙网

  1. 首页 > 生活 > >

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

生活百科vue

文章目录
前言
上一章节，通过创建了一个新的Vue项目（vue-cli版本为 @vue/cli 4.5.11，vue版本为2.6.11），获得如下图所示的初始化Vue项目目录，为了保持结构一致、便于理解和构建管理，后续的学习和开发也将遵循Vue相关的目录结构规范进行 。
提示：
【【Vue前端开发学习】第2章，Vue项目目录结构】1）从 vue-cli3.0 开始 build 和目录就取消了，所有的配置都在vue..js完成，在项目根目录下执行命令 “npm i -d vue-cli-” 进行添加，注意里面需要安装的依赖 。
2）因为在使用创建项目时，勾选了 “Use thesetup (babel, )”，因此创建出来的项目默认没有 ~/src// 文件夹，需要在项目根目录下执行命令 “npmvue- --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')}]

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

文章插图
2、在App.vue 中添加 Demo1

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等外部插件 。


    上一篇：Google Exoplayer 之全面认识

    下一篇：和时间做朋友:你一定要学的高效时间管理术