vue2.0---目录结构

最新推荐文章于 2024-03-20 15:18:50 发布
最新推荐文章于 2024-03-20 15:18:50 发布
阅读量2.1k 收藏 7
点赞数 4
分类专栏： vue2.0 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45806781/article/details/123301687
版权

在这里插入图片描述

  • build—打包之后的项目文件
  • config—配置文件，包括端口号等
  • node_modules—依赖包文件
  • src—开发目录文件
  • static—静态资源目录文件
  • .babelrc、.editorconfig、.gitignore、.postcssrc.js—这些是一些配置文件，包括语法配置，git配置等。
  • index.html—首页
  • package.json—项目配置文件
  • README.md—项目说明文件

在这里插入图片描述

  • assets—放置一些图片，如logo等
  • components—目录里面放了一个组件文件
  • App.vue—项目入口文件（主模板文件），我们也可以直接将组件写这里，而不使用 components 目录
  • main.js—项目开发的核心文件

在这里插入图片描述

  • dev.env.js—配置开发环境
  • index.js—项目配置文件
  • prod.env.js—配置生产环境
南初️
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-static-map-Vue 2.x简单组件，用于生成静态Google映射-Vue.js开发
05-27
vue-static-map一个简单的组件以生成静态google地图Google文档演示SandBox JSBin示例要求Vue 2.XX用法安装vue-static-map一个简单的组件以生成静态google地图Google文档演示Sandbox JSBin示例要求Vue 2 .XX用法从npm安装npm install vue-static-map或使用script标记包含在html中
vue 文件目录结构详解
11-26
项目简介 基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。项目包含： 基础库: vue.js、vue-router、vuex、whatwg-fetch 编译/打包工具：webpack、babel、node-sass 单元测试工具：karma、mocha、sinon-chai 本地服务器：express 目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │
vue2 项目认识 vue2 各个文件夹作用 vue工程文件作用 main.js是什么 package.json是什么
最新发布
求是
03-20 536
一般也是放置静态资源(一般放置多个组件共用的静态资源)，需要注意，放置在assets文件夹里面静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包js文件里面。一般放置一些静态资源（图片），注意： 放在public文件夹内的文件，webpack打包时候，会原封不动打包到dist文件夹中。项目依赖文件夹，相当于java类库。程序入口文件，也是整个程序当中最先执行的文件。唯一的根组件，Vue当中的组件(.vue)记录项目叫什么，有哪些依赖，怎么运行。components文件夹。
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
12-01
我们接着上文继续，本文我们讲解兄弟组件的通信，项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js，该文件的作用在于给同级组件之间传递事件 EventHandler.js代码： import Vue from 'Vue'; export default new Vue(); 1，在Components目录下新建一个组件Brother1.vue <template> <div> <h3>Z国: ghostwu</h3> <input v-on:click="send" type="button" value="发送"> <p>{{msg}
vue2.0-taopiaopiao-master.zip
01-07
vue2.0与express构建淘票票页面 描述 写这个项目的目的一是为了学习vue2.0相关的知识点，二是为了给他想要了解vue2.0的童鞋提供一个学习demo。所以为了使这个项目更加完整，项目中加入一个server服务，模拟服务器环境，为前端提供数据来源，当用 npm run deploy 命令运行前端环境时，就可以直接将前端资源部署到server服务里。因此本项目有两个环境，一个是前端开发环境(端口是8080)，一个是server服务环境(端口是9090)。 主要技术栈： •vue2.0 •vue-router •vuex •mint-ui •nodejs •express 如何运行 下载项目 git clone https://github.com/canfoo/vue2.0-taopiaopiao.git 分别进入到vue2.0-taopiaopiao目录和server目录安装依赖包（注意：需要安装两次） npm install 启动server服务（得先启动后台服务，否则前端页面没有数据），在server目录下执行以下命令，成功执行会终端会提示服务端口号为9090 npm run start 启动前端开发服务，在vue2.0-taopiaopiao目录里执行以下命令，成功执行后，会自动打开浏览器访问前端开发环境，浏览地址是 http://localhost:8080 npm run dev 前端资源部署到server里，开发完成后，在vue2.0-taopiaopiao目录里执行以下命令，成功执行后，可以通过访问server提供的路径访问到页面了，访问路径为 http://localhost:9090/app npm run deploy 备注：因为本项目有提供后台服务，所以当前端部署到服务器后，只要后台服务启动，就可以直接通过 http://localhost:9090/app 路径访问到前端页面，无须再启动前端的开发服务。 项目预览 Mou icon ---------- Mou icon Mou icon ---------- Mou icon 主要目录结构 build config src //前端主要开发目录 --assets //存放前端静态资源 --components //存放组件 --store //vuex数据流管理 --views //页面试图，由vue-router引入 --App.vue --main.js //前端入口文件 server //后台服务 --bin //启动后台服务配置 --database //存放页面所需要的json数据 --public //前端部署时存放在后台服务的位置 --routes //路由于请求接口管理 --views //前端模板存放位置 --app.js //后台服务入口 后台接口 本项目是手动抓取淘票票部分数据，数据是16年12月份的，城市数据只有北上广有数据，其它城市都是随机从北上广数据抽取过来的，电影数据也是部分有数据。抓取的数据存放在server目录里的database里，供前端调用。 1.访问淘票票首页路径： http://localhost:9090/app 2.部分数据接口 ◦获取热映数据 method: GET url: http://localhost:9090/movie/hot/?city=bj 参数说明: city可以为bj、sh、gz ◦获取即将上映数据 method: GET url: http://localhost:9090/movie/coming/?limit=20&offset=0 参数说明: limit为每次请求的数据数量，offset为所有数据的偏移量 ◦获取城市数据 method: GET url: http://localhost:9090/movie/city ◦获取电影院数据 method: GET url: http://localhost:9090/movie/cinema/?city=bj 参数说明: city可以为bj、sh、gz
vue2.0目录中的static和assets有什么区别[译]
charming的博客
07-05 1322
Handling Static Assets（处理静态资源） 或许你早就发现，在我们的项目结构中有两个目录来存放静态资源文件，src/assets和src/static。那么这两个文件到底有啥区别呢？ Webpacked 资源 要回答上面这个问题，我们首先要知道webpack是怎样打包静态资源：在*.vue组件中，所有的模板文件和css文件都会被vue-html-loader和css-loa...
vue cli2 项目的目录结构
weixin_44872023的博客
07-03 2061
vue cli2 项目的目录结构 简单的说一下 vue cli2 项目的目录结构。 1. 创建项目 vue cli2 创建项目 2.目录结构 先看图 文件结构细分 1.build——[webpack配置] build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。 2.config——[vue项目配置] config文件主要是项目相关配置，我们常用的
vue - 优雅的vue2项目总体结构
qq_43886365的博客
07-24 1319
在多人合作的 Vue 项目中，或多或少会使用到 vue-router / vuex / axios 等工具库。本文在基于 vue-cli webpack模板 生成的目录结构基础上，建立一个`利于多人合作`、`扩展性强`、`高度模块化`的 vue 项目目录结构。
Vue2 文件目录结构详解
baidu_24346235的博客
10-17 1057
Vue2目录结构解析
代码大师麦克拉瑞的博客
08-19 1622
Vue是一款用于构建用户界面的JavaScript渐进式框架，被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，这使得它易于上手，也便于与第三方库或既有项目整合。同时，当与现代化的工具链以及各种支持类库结合使用时，Vue也能够为复杂的单页应用提供驱动。Vue.js支持所有兼容ECMAScript 5的浏览器，但不支持IE8及其以下版本。Vue的一个主要特性是数据驱动，即直接将数据同步到结构上，这使得视图管理抽象为数据管理，而不是管理DOM结构。
Vue2-Vue项目的目录结构和.vue文件的构成
qq_43895215的博客
03-30 3284
主要参考 Vue.js教程-Vue项目的目录结构和.vue文件的构成 这哥们写的是真细致，基本我想要了解的vue大题框架和细致介绍都有了，附上我的某页面实现的源码，结合这篇文章，基本页面大组件的理解就大差不差了。 目录文件： view/home.vue 源码 <template> <!-- html区域 template里面只能有一个div--> <div class="about" style="min-height:100%" > <!-- 这里用的是
vue2.0-源：vue源码分析-基于2.2.6版本
02-23
vue2.0-源 vue 2.2.6源码分析 最近一直在看vue2.2.6的源码，所以准备分几个模块分别记录一下。由于水平有限，对整个框架的源码还没有整体的把握。所以前期内容可能比较零散，更多的是记录自己看的过程。慢慢整理成...
vue-zhihudaily-2.0 cs1707vue-zhihudaily-2.0 Zhihudaily演示是使用Vue 2.0，vue-router和vuex以及服务器端渲染构建的。 由cs1707-Vue.js开发
05-27
实时演示功能服务器端渲染Vue + vue-router + vuex一起工作服务器端数据预取客户端状态和DOM水化开发中的热重装用于生产CSS提取体系结构概述Build Setup需要Node.js 6+＃install依赖项npm install＃以开发人员模式...
vue2.0结合Element-ui实战案例
12-03
我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例，后端数据接口，会使用json-server快速搭建一个本地的服务，方便对数据的增删改查， 利用以上技术我们会搭建...
VUE多页面配置
qq16337的博客
10-28 527
vue.config.js 配置 module.exports = { pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 ...
Vue-Cli2.XX 静态资源文件夹的路径部署问题
weixin_43209953的博客
02-17 6401
直接进入正题,这里我们讨论的是vuecili3以前的版本： 一般我们用vuecli3之前的版本创建项目的时候，根目录下会有一个static文件夹，这个文件夹是用来放置images和json等静态文件的，同样的在根目录下的src下还有一个assets文件夹放置静态文件的，区别是assets里面的静态资源会被webpack打包编译，而static下面的静态资源仅仅会被在打包编译的时候赋值到dist文...
vue-cli2 中 assets 和 static 文件夹的区别
Wayne8016的博客
02-22 1557
相信有很多小伙伴在刚开始学习 vue 的时候都傻傻分不清楚，assets 和 static 文件夹的区别。下面我就来简单说一下它们之间的不同之处。 assets目录中的文件会被webpack处理解析为模块依赖 然后，它只支持相对路径的形式。 static/ 目录中的文件不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。 然后，必须使用绝对路径引用...
vue2.0详细目录结构注解
删库跑路
06-04 2677
sell # 项目根目录名称 —-build #(webpack配置相关) —-config #(webpack配置相关) —-node_modules #npm install 安装的依赖代码库 —-src #存放项目源码 —-static #存放第三方静态资源 ————.gitkeep #为了当static目录为空Git也可以
Vue2.0的目录结构
06-01
Vue2.0的目录结构一般包含以下几个文件和目录： 1. index.html：应用的入口文件。 2. static目录：存放静态资源文件，如图片、样式表和JavaScript文件。 3. src目录：存放源代码文件。 - assets目录：存放应用的资源文件，如图片、字体等。 - components目录：存放Vue组件。 - router目录：存放Vue应用的路由文件。 - views目录：存放Vue应用的视图文件。 - App.vue：Vue应用的主组件。 - main.js：Vue应用的入口文件，用于初始化Vue实例并挂载到DOM元素上。 4. node_modules目录：存放应用的依赖模块。 5. package.json文件：存放应用的基本信息和依赖模块信息。 6. webpack.config.js文件：存放Webpack打包配置信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南初️

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值