精华内容
下载资源
问答
  • 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项目 目录结构,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 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

    展开全文
  • 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项目目录结构图及目录详解

    千次阅读 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项目 新建项目后,用vscode打开,会看到项目目录,如下图 来看看我们新建的项目里有哪些内容 node_modules npm 加载的项目依赖模块 public 用于存放静态资源,不会被压缩、...
  • 安装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项目配置便于维护的目录结构 ,需要的朋友可以参考下
  • 在上一篇博客,我们通过webpack+vue-cli搭建了一个简单的vue2开发项目,走过的都知道,一个命令创建了好多文件和文件夹,一脸懵,这里,为大家简单介绍一下项目目录结构,首先,来看整体项目目录结构的截图: ...
  •  Vue并不限制你的代码结构。但是,它规定了一些需要遵守的规则:  1、应用层级的状态应该集中到单个store对象中。  2、提交mutation是更改状态的唯一方法,并且这个过程是同步的。  3、异步逻辑都应该封装到...
  • 使用Vue CLI 3快速搭建一个结构清晰的VUE项目
  • 下面小编就为大家分享一篇基于vue-cli创建的项目目录结构及说明介绍,具有很好的参考价值,希望对大家有所帮助
  • 在 *.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