正文

vue学习笔记——目录结构介绍

一只猫的旅行  一只猫的旅行  2022-08-25  644

关键词：

1.初始目录结构如下：

2.目录结构介绍

目录/文件	说明
build	最终发布的代码存放位置。
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 commponents: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组建写这里，而不使用 commponents 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

3.初始流程

　　1.index.html ---首页入口文件

其中 id 为 app 的 div 是页面容器，其中的 router-view 会由 vue-router 去渲染组件，讲结果挂载到这个 div 上。

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Vue Router Demo</title>
 </head>
 <body>
    <div id="app">
       <router-view></router-view>
     </div>
     <script src="dist/bundle.js"></script>
 </body>
 </html>

　　2.main.js ----核心文件

　　　　　　此处的 el:'#app', 表示的是index中的那个 <div id="app"></div>, 它要被 App这个组件 components: { App } 的模板 template: '<App/>'替换。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

　　3.App.vue ----项目入口文件

App这个组件 components: { App } 的模板 template: '<App/>' 的具体内容。其中的 router-view 会由 vue-router 去渲染组件，讲结果挂载到这个 div 上

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

　　4.router/index.js -----路由与组件　　　　

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

vue—项目的目录结构介绍

【Vue】—项目的目录结构介绍查看详情

vue.js2.0官方文档学习笔记——01.vue介绍

这是我的vue.js2.0的学习笔记，采取了将官方文档中的代码集中到一个文件的形式。目的是保存下来，方便自己查阅。!官方文档：https://cn.vuejs.org/v2/guide/01.vue介绍<html><head><metacharset="utf-8"/><title>vue介绍</title>&... 查看详情

vue学习笔记——简单的介绍以及安装

学习编程需要的是API+不断地练习^_^Vue官网：https://cn.vuejs.org/菜鸟教程：http://www.runoob.com/vue2/vue-tutorial.html 1.简单的介绍　　Vue.js（读音/vju?/,类似于view）是一套构建用户界面的渐进式框架。　　Vue只关注视图层，采用自底向... 查看详情

数据结构初阶学习笔记一数据结构介绍及算法分析（建议收藏！！！）(代码片段)

...间复杂度的概念：2.大O渐进法表示法：数据结构学习的心理准备&# 查看详情

vue目录结构及简单的开发介绍

熟悉vue项目的目录结构，在一定程度上能提高我的开发效率及查找文件的速度。这里比较推荐使用VScode编译器，HBuild-x,webstorm等编译器相比之下逊色不少，用过的就知道有多香。目录Vue.js目录结构目录说明VUE入门基本操作Vue.... 查看详情

solr学习笔记-目录结构

家目录Solr在运行时需要访问它的家目录，因为配置文件和它储存的索引都在它的家目录中保存。（家目录指的是运行时的目录，standalone和solrcloud的家目录不一定相同，在solr运行后可以用solrstatus来查看家目录路径）Solr的standalone... 查看详情

vue学习笔记-初始化一个vue项目

1.cnpminstall-gvue-cliUsage:vueinit<template-name><project-name>2.我们一般使用webpack模版构建应用vueinitwebpackweb043.安装vue-routercnpminstallvue-router--save-dev4.npmrundev 简单的目录结构:|-index.html | 查看详情

03-目录结构

目录结构作者：矮哥归档：学习笔记2017/1/6目录第1章linux系统沐目录结构的基本特点介绍...11.1挂载光盘和卸载光盘...11.2小结...3第2章目录的介绍...32.1小结：重要目录回顾...5第3章/etc/重要目录里的重点（了解）...63.1/etc/sysconfig/net... 查看详情

《vue.js从入门到项目实战》的项目实战笔记

vue项目之启动项目前言：vue的基本知识重点讲述《vue.js从入门到项目实战》的第一章到第四章vue项目化重点讲述《vue.js从入门到项目实战》的第六章接下来就是对第八章的启动了。文章目录vue项目之启动项... 查看详情

typescript学习笔记(代码片段)

最近想先学完typescript再去学习vue3，感觉会比较好~开发环境搭建1.新建目录进入目录输入命令npminit(需要自己配置)或者npminit-y(npm默认配置)2.创建src目录目录结构大致如下utils——存放业务相关的可复用方法tools——存放跟业务无... 查看详情

vue学习总结笔记(代码片段)

文章目录1.Vuex插件1.1什么是Vuex？1.2为什么要用Vuex？1.3Vuex的原理图2.搭建Vuex环境2.1安装Vuex的注意事项2.2搭建Vuex环境2.3Vue的注意事项2.4Vuex的使用大体流程3.Vuex实现求和案例4.Vuex的开发者工具5.Vuex中的getters配置项5.1getters介... 查看详情

vue3学习总结笔记(十三)(代码片段)

文章目录1.Vue3简介2.创建Vue3项目工程2.1使用Vue-cli创建2.2使用Vite创建Vue3工程3.Vue3之分析工程结构3.Vue3之安装开发者工具4.Vue3之setup5.Vue3之ref函数5.1ref函数处理基本数据类型5.2ref函数处理对象类型6.Vue3之reactive函数7.Vue3之与vue2进行... 查看详情

vue3学习总结笔记(十三)(代码片段)

vue学习总结笔记(代码片段)

文章目录1.Vue路由(route)1.1路由与路由器1.2SPA(singlepagewebapplication)应用单页面应用1.3路由的分类2.vue-router插件库2.1vue-router的大体流程2.2vue-router的安装3.vue-router实现流程4.vue-router的几个注意事项4.1一般组件和路由组件，components... 查看详情

vue学习经验分享，在这个大前端时代，你再不会vue就out啦

主要为大家大致的介绍Vue的介绍、环境搭建要求、如何开发等经验分享目录vue介绍 Vue的MVVM模式介绍 Vue之HelloWorldVue的生命周期从Vue到页面Vue的常用指令Vue-CLI脚手架介绍使用Vue-cli构建Vue项目目录结构vuedemo项目简单的功能 Vue以... 查看详情

async-validator源码学习笔记：目录结构(代码片段)

上一篇文章《async-validator源码学习（一）：文档翻译》已经将async-validator校验库的文档翻译为中文，看着文档可以使用async-validator异步校验表单。本篇文章继续学习async-validator源码目录结构。在项目中安装async-validator：npmiasync-va... 查看详情

javaweb学习笔记——tomcat的目录结构

一、Tomcat的目录结构进入Tomcat的根目录，如下图所示1.bin：Tomcat的可执行文件。如startup.bat用来打开Tomcat，shutdown.bat用来关闭Tomcat2.conf：Tomcat的配置文件。最重要的是server.xml，在这里面可以更改Tomcat很多默认的... 查看详情

magento学习第一课——目录结构介绍

Magento学习第一课——目录结构介绍一．Magento为何强大 Magento是在Zend框架基础上建立起来的，这点保证了代码的安全性及稳定性。选择Zend的原因有很多，但是最基本的是因为zend框架提供了面向对象的代码库并且... 查看详情