精华内容
下载资源
问答
我要提问
  • vue项目目录结构详解
    千次阅读
    2021-03-18 09:25:01

    目录截图：
    vue目录结构

    1. build：构建脚本目录

    • build.js ---- 生产环境构建脚本
    • build-server.js ---- 运行本地构建服务器，可以访问构建后的页面
    • dev-client.js ---- 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
    • dev-server.js ---- 运行本地开发服务器
    • check-version.js ---- 检查npm、node.js版本
    • utils.js ---- 构建相关工具方法
    • vue-loader.conf.js ---- 配置css加载器以及编译css之后自动添加前缀
    • webpack.base.conf.js ---- webpack基本配置
    • webpack.dev.conf.js ----- webpack开发环境配置
    • webpack.prod.conf.js ---- webpack生产环境配置

    2. config：项目配置

    • dev.env.js ---- 开发环境变量
    • index.js ---- 项目配置文件
    • prod.env.js ---- 生产环境变量
    • test.env.js ---- 测试环境变量

    3. node_modules：npm加载项目的依赖模块
    4. src：源码目录

    • main.js ---- 入口js文件
    • app.vue ---- 根组件
    • components ---- 公共组件目录
    • assets ---- 资源目录，这里的资源会被wabpack构建
    • routes ---- 前端路由
    • store ---- 应用级数据（state）
    • views ---- 页面目录

    5. static：静态资源目录。不会被webpack构建
    6. package.json：npm包配置文件，定义项目的npm脚本、依赖包等信息
    7. README.md：项目的说明文档，markdown格式

    前端
    更多相关内容

  • 浅谈Visual Studio 2019 Vue项目的目录结构

     2020-08-19 12:43:40
    主要介绍了Visual Studio 2019 Vue项目 目录结构,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    收起

  • vue 文件目录结构详解

     2020-08-28 18:03:22
    本篇文章主要介绍了vue 文件目录结构详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • Vue项目目录结构说明

     千次阅读 2018-08-26 15:04:50
    vue项目结构图 简单介绍目录结构 build目录是一些webpack的文件，配置参数什么的，一般不用动 config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹，基本上文件都应该放在这里...

    vue项目结构图
    这里写图片描述
    简单介绍目录结构
    build目录是一些webpack的文件，配置参数什么的，一般不用动
    config是vue项目的基本配置文件
    node_modules是项目中安装的依赖模块
    src源码文件夹，基本上文件都应该放在这里。
    —assets 资源文件夹，里面放一些静态资源
    —components这里放的都是各个组件文件
    —App.vue App.vue组件
    —main.js入口文件
    static生成好的文件会放在这个目录下。
    test测试文件夹，测试都写在这里
    .babelrc babel编译参数，vue开发需要babel编译
    .editorconfig 看名字是编辑器配置文件，不晓得是哪款编辑器，没有使用过。
    .gitignore 用来过滤一些版本控制的文件，比如node_modules文件夹
    index.html 主页
    package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息
    README.md 介绍自己这个项目的，想怎么写怎么写。不会写就参照github上star多的项目，看人家怎么写的
    详细介绍几个文件
    1.package.json

    {
  "name": "demo",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Luke.deng",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run e2e"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "chromedriver": "^2.21.2",
    "cross-spawn": "^4.0.2",
    "nightwatch": "^0.9.8",
    "selenium-server": "2.53.1",
    "semver": "^5.3.0",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

    package.json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下：

    {
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

    3.index.html
    主页我们可以像平时普通的html文件一样引入文件和书写基本信息，添加meta标签等。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>华企商学院</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

    4.main.js
    这里是入口文件，可以引入一些插件或静态资源，当然引入之前要先安装了该插件，在package.json文件中有记录。

    /*引入Vue框架*/
import Vue from 'vue'
/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*重置样式*/
import "assets/css/base.css"
/*基本JS*/
import "assets/js/common.js"
/*引入路由设置*/
import "./routers.js"
/*使用VueResource插件*/
Vue.use(VueResource)

    5.App.vue
    这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。

    <template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</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>

    总结
    在webpack的配置文件里，设置了main.js是入口文件，我们的项目默认访问index.html，这个文件里面<div id="app"></div>和App.vue组件里面的容器完美的重合了，也就是把组件挂载到了index页面，然后我们只需要去建设其他组件就好了，在App组件中我们也可以引入，注册，应用其他组件，后面我会介绍如何通过路由将其他组件渲染在App组件，这样我们就只需要去关注每个组件的功能完善。

    收起
    展开全文

  • vue项目划分目录结构

     2022-01-21 16:48:37
    vue项目结构的细节划分

    1、本地项目文件除了用get clone方法以外还可以用到更简单的命令进行关联

    git remote add origin git仓库项目的地址

    git push -u ortgin maste

    通过这两条命令可以快速的进行本地与git仓库连接

    2、创建新项目首先进行目录划分

      2.1刚开始创建的vue cli2目录是这样的，在真实的公司进行开发的时候需要对目录结构进行细划分，便于后期的管理和维护

            

    2.2、这里的主要是对src进行目录规划

            

       2.2.1、(1)assets：资源文件，主要放css和img文件

                         

                   (2)common:公共js文件，主要是一些js常量抽取和封装的工具类

                           

                   (3)componets:组件，这个想必大家都很熟悉了，主要是本项目业务的组件和公共的组件（封装的组件在其它项目也可以使用）

                            

                 （4）router:路由文件，store：状态管理

                            

                 （5）network:存放一些axios文件和分类主页js文件

                             

                  （6）views：视图文件。一些分类主页各个部分的文件

                            

     2.3、文件根目录创建的文件

            2.3.1、vue.config.js：对文件路径进行别名，路径的时候不用输入../

                    

                       vue.config.js中的格式如下：

             2.3.2、.editorconfig:对代码的风格进行统一(vue3中没有这个文件，建议在项目文件中添加这个文件，在多个人开发提交项目的时候，规范代码格式）

             

            .editorconfig文件内容如下

             

     

    总结：在创建新项目之后的第一步就是划分目录结构（根据自己所需），这样方便后期的管理和维护。

    收起
    展开全文
    前端

  • vue项目结构目录简介

     千次阅读 2021-08-23 23:21:55
    首先来看一下整个结构目录 接下来从上到下的看一下每个文件以及文件是干嘛的 build 文件夹 及 子目录 这里面是一些webpack的配置，主要用于项目打包时的一些设置。这里不去更详细的深入，相关的文件及配置会在后面...

    首先来看一下整个结构目录
    在这里插入图片描述
    接下来从上到下的看一下每个文件以及文件是干嘛的
    在这里插入图片描述
    build 文件夹 及 子目录

    这里面是一些webpack的配置，主要用于项目打包时的一些设置。这里不去更详细的深入，相关的文件及配置会在后面用到时在详细的介绍。
    在这里插入图片描述
    config 文件 及 子目录

    这个文件夹里装的是整个项目 开发运行时的一些配置，比如npm run dev 时 项目的启动端口 之类的
    在这里插入图片描述
    node_modules 文件 及 子目录

    这个文件夹里面全部都是node的一些基础的依赖包，当我们拓展的安装一些别的插件时 也会装在这个文件夹里。
    在这里插入图片描述
    src 文件 及 子目录

    这个文件夹 是 整个项目的主文件夹 ， 我们的代码大部分都在这里完成。来具体的看一下里面的内容：
    在这里插入图片描述
    assets 文件夹里面主要放置一些资源文件。比如js 、css 之类的文件。
    在这里插入图片描述
    components 文件夹可以说是vue 的 灵魂了 ， 组件文件全部都可以放到这里面。

    组件 ！一个vue项目就是由一个个的组件拼装起来的。
    在这里插入图片描述
    router 文件夹 及 子目录

    这个文件夹里的是整个vue项目的路由，vue 是单页面应用的代表，这里面就是设置一个一个组件的地址的文件。
    在这里插入图片描述
    app 文件

    这个文件是整个项目的入口文件，相当于包裹整个页面的最外层的div。
    在这里插入图片描述
    main.js 文件

    这个文件是项目的主js,全局的使用的各种变量、js、插件 都在这里引入 、定义。
    在这里插入图片描述
    static 文件夹 及 子目录

    这个文件夹里是一些静态资源文件。
    在这里插入图片描述
    这个四个文件是项目自带文件 基本上用不到
    在这里插入图片描述
    index 文件就是项目的承载页面
    在这里插入图片描述
    package 文件是整个项目用的到的所有的插件的json的格式 比如 这个插件的 名称 ， 版本号。 当在项目里使用npm install 时 node 会自动安装， 这个文件里的所有插件。
    在这里插入图片描述
    这是项目的一些说明文件。

    这样整的项目的结构就大体的捋顺了 一遍 。

    哦，对了还有一个文件夹没有出现 ，那就是;
    在这里插入图片描述
    这个dist 文件夹 是在执行了 npm run build 打包指令之后才会出现的， 整个项目写好之，打包出来的所有文件都会在这里，只需要访问文件夹里的index文件可以进入应用了。

    最后总结一下吧 ----
    在这里插入图片描述
    引自：CSDNchao2458

    收起
    展开全文
    idea

  • vue项目目录结构

     千次阅读 2017-05-16 16:58:18
    项目目录以及文件结构。 如上图所示，我们的目录结构就是这样的了。 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。 config 配置目录，默认...
    收起

  • vue项目目录结构及运行的基本原理

     千次阅读 2019-11-14 15:47:30
    1、Vue项目目录结构（通过vue create使用默认配置创建的Vue项目） 2、项目运行基本原理 作为初学者我们不需要上来就完全明白整个项目的逻辑，可以先从宏观上理解大概，随着学习的深入慢慢便会明白。 初始项目...
    收起

  • Visual Studio 2019 Vue项目 目录结构

     千次阅读 2020-03-15 10:04:50
    Visual Studio 2019 Vue项目 创建成功后可看到如下结构Visual Studio 2019配置vue项目 具体文件结构如下图 目录 说明 dist 项目编译（打包 npm run build）后产生的可发布的文件（html,js,css ...
    收起

  • vue项目完整的目录结构

     千次阅读 2019-12-25 16:38:27
    收起

  • vue项目目录结构说明

     千次阅读 2018-02-07 09:41:36
    这是我创建的项目目录，见下图： 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录，包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块src 这里是我们要开发的目录，...
    收起

  • 【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析

     千次阅读 多人点赞 2020-10-15 21:16:27
    Vue项目的详细目录结构解析
    收起

  • vue项目的目录结构图及目录详解

     千次阅读 2020-03-31 00:43:33
    config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹，基本上文件都应该放在这里。 —assets 资源文件夹，里面放一些静态资源 —components这里放的都是各个组件文件 —App....
    收起

  • vue-cli 项目结构目录简介

     万次阅读 多人点赞 2018-07-30 15:26:29
    首先来看一下整个结构目录   接下来从上到下的看一下每个文件以及文件是干嘛的    build 文件夹 及 子目录 这里面是一些webpack的配置，主要用于项目打包时的一些设置。这里不去更详细的深入，相关的...
    收起

  • vue的目录结构、项目流程、vue-router

     千次阅读 2018-08-13 17:47:44
    vue的目录结构 目录/文件 说明 build 最终发布的代码存放位置。构建脚本目录 config 配置目录，包括端口号等。我们初学可以使用默认的。项目配置。 node_modules npm 加载的项目依赖模块。感觉...
    收起

  • 认识vue3.0项目的目录结构

     2022-02-08 09:40:55
    上一篇笔记新建一个vue3.0项目 新建项目后，用vscode打开，会看到项目目录，如下图 来看看我们新建的项目里有哪些内容 node_modules npm 加载的项目依赖模块 public 用于存放静态资源，不会被压缩、...
    收起
    node.js

  • vue学习（五）—vue-cli构建vue项目目录结构

     千次阅读 2018-03-30 17:47:05
    安装node.js ... 直接进行安装，安装完成node.js后自动帮助完成npm的安装， ...查看npm是否安装成功并安装vue-cli 安装淘宝镜像 npm config set registry https://registry.npm.taobao.or...
    收起

  • vue项目开发的目录结构

     千次阅读 2018-03-28 18:55:02
    vue项目开发的目录结构一、通过命令行工具安装vue（npm install webpack vue-project） build -- 项目构建的相关代码config -- 配置目录，包括端口、环境等的配置src -- 开发的主要目录 -- asset : 放置一些...
    收起

  • Vue+webpack项目配置便于维护的目录结构教程详解

     2020-10-17 21:14:31
    新建项目的时候创建合理的目录结构便于后期的维护是很重要。这篇文章主要介绍了Vue+webpack项目配置便于维护的目录结构 ,需要的朋友可以参考下
    收起

  • vue 项目 src 项目目录结构

     2019-08-20 10:11:19
    收起

  • 基于webpack搭建的vue2项目目录结构概述

     千次阅读 2018-05-24 13:10:12
    在上一篇博客，我们通过webpack+vue-cli搭建了一个简单的vue2开发项目，走过的都知道，一个命令创建了好多文件和文件夹，一脸懵，这里，为大家简单介绍一下项目的目录结构，首先，来看整体项目目录结构的截图： ...
    收起
    webpack

  • Vue学习之路3-浅析Vue-cli搭建项目后的目录结构

     千次阅读 2018-07-17 15:59:01
     Vue并不限制你的代码结构。但是，它规定了一些需要遵守的规则：  1、应用层级的状态应该集中到单个store对象中。  2、提交mutation是更改状态的唯一方法，并且这个过程是同步的。  3、异步逻辑都应该封装到...
    收起

  • 使用VueCLI3快速搭建一个结构清晰的VUE项目

     2019-08-09 19:13:53
    使用Vue CLI 3快速搭建一个结构清晰的VUE项目
    收起

  • 基于vue-cli创建的项目的目录结构及说明介绍

     2020-08-28 18:54:51
    下面小编就为大家分享一篇基于vue-cli创建的项目的目录结构及说明介绍，具有很好的参考价值，希望对大家有所帮助
    收起

  • Vue项目目录结构注解附assets与static目录的区别

     千次阅读 2018-02-27 14:57:48
    在 *.vue 组件中，所有模板和CSS都会被 vue-html-loader 及 css-loader 解析，并查找资源URL。例如，在 和 background: url(./logo.png) 中，"./logo.png" 是相对的资源路径，将由Webpack解析为模块依赖。
    收起

  • vscode下vue的项目结构分析

     千次阅读 多人点赞 2019-11-18 19:12:18
    我是用脚手架cli 4.0.5版本创建的vue项目 得到的vue的项目结构如下 接下来就好好分析一下各个文件的用途 1.npm相关文件 node_modules npm是一个包管理器，可以安装很多别人的包，那么我们安装的包呢...
    收起

  • vue-cli创建项目目录结构解释

     千次阅读 2018-06-21 22:13:26
    vue-cli创建项目目录结构解释文件/文件夹解释build和configwebpack配置相关的文件；将来利用中间件实现两个不同于之间的转发，需要配置。node_modules项目开发依赖的一些模块src将来的开发大多在这里，我们关注的...
    收起

  • vue项目文件结构

     千次阅读 2022-03-24 11:48:24
    五、vue项目结构 1、build：构建脚本目录 1）build.js ==> 生产环境构建脚本； 2）check-versions.js ==> 检查npm，node.js版本； 3）utils.js ==> 构建相关工具方法； 4）vue-loader.conf.js ==> 配置...
    收起
    前端

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 83,908
精华内容 33,563
热门标签
关键字：

vue项目目录结构

友情链接： rbrowser.zip