前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >详解 Vue 目录及配置文件之 node_modules,src,static,test 目录

详解 Vue 目录及配置文件之 node_modules,src,static,test 目录

作者头像
Demo_Null
发布2020-09-28 14:55:30
3.9K0
发布2020-09-28 14:55:30
举报
文章被收录于专栏:Java 学习

1.1 项目目录介绍

在这里插入图片描述
在这里插入图片描述

目录/文件

说明

详解

build

项目构建(webpack)相关代码

详解

config

配置目录,包括端口号等

详解

node_modules

npm 加载的项目依赖模块

详解

src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: ♞ assets:放置一些图片,如 logo  ♞ components:放置一些组件 ♞ views:页面(视图)组件 ♞ router.js:路由脚本文件 ♞ App.vue:项目入口文件 ♞ main.js::项目的核心文件

详解

static

静态资源目录,如图片、字体等

详解

test

初始测试目录,可删除

详解

.xxxx 文件

这些是一些配置文件,包括语法配置,git 配置等

index.html

首页入口文件

package.json

项目配置文件

详解

README.md

项目的说明文档,markdown 格式

1.2 node_modules

 node_modules 是安装 node 后用来存放用包管理工具下载安装的包的文件夹。比如 webpack 等这些工具。

在这里插入图片描述
在这里插入图片描述

1.3 src

assets:放置静态资源,包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件,是因为要在组件的 css 标签里加入 ‘scoped‘ 标记,将其作用范围限制在此组件以及调用它的父级组件中,避免污染全局样式; components:放置通用模块组件。项目里总会有一些复用的组件,例如弹出框、发送手机验证码、图片上传等,将它们作为通用组件,避免重复工作; views:放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构,再引入通用模块组件,形成完整的页面; router:放置路由设置文件,指定路由对应的组件; App.vue:入口组件,views 里的组件会被插入此组件中,此组件再插入 index.html 文件里,形成单页面应用; main.js:入口 js 文件,影响全局,作用是引入全局使用的库、公共的样式和方法、设置路由等

在这里插入图片描述
在这里插入图片描述

1.3.1 main.js

代码语言:javascript
复制
// 引入 vue
import Vue from 'vue'
// 自动寻找名字为 App 的文件,如 app.vue app.js...
import App from './App'
// 引入 router
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  // 绑定
  el: '#app',
  // 路由
  router,
  // 组件
  components: { App },
  // 将 App 局部组件显示在页面上
  template: '<App/>'
})

1.3.1 App.vue

代码语言:javascript
复制
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 显示的是当前路由地址对应的内容 -->
    <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>

1.4 static

  src 目录下的 assets 目录和根目录下的 static 目录都是存放静态文件的,但是 assets 里的文件编译过程中会被 webpack 处理理解为模块依赖,只支持相对路径的形式。 assets 放可能会变动的文件;static 里的文件不会被 webpack 解析,会直接被复制到最终的打包(默认是dist/static)下,必须使用绝对路径引用这些文件。static 放不会变动的文件。这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来设置的。任何放在 static/ 中文件需要以绝对路径的形式引用:/static/[filename]。如果更改 assetSubDirectory 的值为 assets,那么路径需改为 /assets/[filename]。

1.5 test

 测试目录,所有的测试文件都在这里,可以直接删除。

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/07/23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.1 项目目录介绍
  • 1.2 node_modules
  • 1.3 src
    • 1.3.1 main.js
      • 1.3.1 App.vue
      • 1.4 static
      • 1.5 test
      相关产品与服务
      验证码
      腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档