vue37 —— vuecli2 目录结构

最新推荐文章于 2023-09-05 22:45:00 发布
最新推荐文章于 2023-09-05 22:45:00 发布
阅读量256 收藏
点赞数
分类专栏： vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43899694/article/details/103226685
版权
本文介绍了VueCLI2的目录结构，包括build和config中的配置文件，src源码目录，static静态资源文件夹，.babelrc的Babel配置，.editorconfig的代码风格统一设置，以及package.json和package-lock.json对于依赖版本的管理。
摘要由CSDN通过智能技术生成

视频
在这里插入图片描述

build 和 config 里都是配置文件，
从package.json阅读

...
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "node build/build.js"  //node xx.js , 可直接运行js文件

src文件夹 放源码

static 存放的文件会原封不动赋值到dist文件夹中

.babelrc文件：

"targets"
最低0.47元/天 解锁文章
8笔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈 browserslist
u013262823的博客
03-01 7067
browserslist browserslist配置能够分享目标浏览器和nodejs版本在不同的前端工具。主要是为了表示当前项目的浏览器兼容情况。 官方默认配置: "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8", "safari >= 7" ] 对于部分配置参
vue cli2 项目的目录结构
weixin_44872023的博客
07-03 2106
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文件主要是项目相关配置，我们常用的
构建基础篇 1：你需要了解的包管理工具与配置项
乐夫天命兮的博客
05-08 272
构建基础篇 1：你需要了解的包管理工具与配置项 任何一个项目的构建离不开工具和统一的管理标准，在项目开发和维护过程中，我们需要了解安装包的相应工具和配置文件，以此来有效的进行项目的迭代和版本的更新，为项目提供基本的运行环境。本文将详细介绍构建 Vue.js 项目相关的依赖包安装工具和相应的配置文件，为大家提供参考。 介绍 相信大家对于包管理工具的使用一定不会陌生，毕竟它已经成为前端项目中必不可少的一部分，为了照顾部分零基础用户，这里我们做一个简单的介绍。 1. npm 与 package.json npm
[前端].browserslistrc文件解析
前端
02-22 820
.browserslistrc文件使用说明.browserslistrc文件文件解析> 1%last 2 versionsnot dead 该文加并不是vue文件独有的，因为该文件相当于一个通用文件 .browserslistrc文件 > 1% last 2 versions not dead not ie 11 文件解析 package.json 文件里的 browserslist 字段 (或单独的 .browserslistrc 文件)，指定项目的目标浏览器的范围。这个值会被 @babel
vue-cli配置文件——config篇
08-28
2. `index.js`: 这是 `config` 文件夹的主配置文件，它定义了开发服务器的一些设置，如静态资源目录 (`assetsSubDirectory`) 和静态资源的发布路径 (`assetsPublicPath`)。此外，还有代理配置 (`proxyTable`)，允许...
vue-cli入门之项目结构分析
12-09
在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目，那么接下来，我们来梳理一下vue-cli项目的结构。 总体框架 一个vue-cli的项目结构如下，其中src文件夹是需要...
详解如何使用Node.js编写命令工具——以vue-cli为例
01-20
2. `.version(require('../package').version)`: 设置命令版本为`vue-cli`的版本号。 3. `.usage('<command> [options]')`: 设置命令的基本使用格式。 4. `.command('init', 'generate a new project from a ...
前端VUE实战——去哪儿网项目实战.7z
08-17
在本项目中，我们将深入探讨基于Vue.js框架的前端实战应用——去哪儿网项目。Vue.js是一个轻量级、高性能的JavaScript框架，专为构建用户界面而设计，特别适合开发单页面应用（SPA）。通过这个实战项目，我们可以...
前端工程基础知识点--Browserslist (基于官方文档翻译）
weixin_33757609的博客
09-04 2763
总结不出更好的了，感觉官方文档已经写得够清楚了，翻译的不好，请大家斧正 简介 browserslist 是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具。它主要被以下工具使用： Autoprefixer Babel post-preset-env eslint-plugin-compat stylelint-unsupported-browser-features postc...
浏览器的适配 - browserslist
qq_43556517的博客
07-05 906
browserslist 为前端工具提供兼容目标浏览器和Node.js版本的配置 规则 default [占比]% not dead last [number] version … 使用 package.json 示例： { "browserslist": ["> 1%", "last 2 versions"] } .browserslistrc 示例： > 1% last 2 versions not dead 各个条件的关系可以是 交 并 补 ...
vue-cli2的目录结构解析
lzc2644481789的博客
08-05 1801
一、简介 1. 本文主要介绍vue cli2自动生成的项目结构的解析； 二、项目结构 1. 上图是项目的整体目录结构。我们读这个项目结构的时侯要先从package.json开始读，首先是看package.json中的scripts中的build，可以看出来它是执行 node build/build.js， node是可以直接执行文件的。 所以我们去看看build.js。这里介绍一下，package.json...
Browserslist 信息和配置使用整理
最新发布
qq_24357165的博客
09-05 2736
Browserslist 是一个根据目标浏览器（target browser）检查支持浏览器版本的 js 库。它是现代前端工程化不可或缺的工具，无论是处理 js 的babel还是处理 css 的postcss，凡是与垫片相关的，他们背后都有 Browserslist 的身影。然而不恰当的 browserslist 配置和使用轻则导致代码冗余，严重可能会影响 autoprefixer 或 babel 代码的线上兼容， browserslist 的配置还是需要引起重视。
vueCLI脚手架的介绍和安装
weixin_44020809的博客
07-25 465
什么是Vue CLI 如果你只是简单写几个Vue的Demo程序，那么你不需要Vue CLI 如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI 使用Vue.js开发大型应用时，我们需要考虑代码目录结构，项目结构和部署，热加载，代码单元测试等事情 如果每个项目都要手动完成这些工作，那无疑效率比较低，所以通常我们会使用一些脚手架工具来帮助完成这些事情 CLI是什么？ CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架 Vue CLI是一个官方发布Vue.js项目
webpack2中postcss-loader报错noconfigfound
weixin_30679823的博客
12-10 110
在项目根目录下创建一个postcss.config.js文件，配置如下： module.exports = { plugins: [ require('autoprefixer')({ browsers: ['last 5 versions'] }) ] } 直接运行 npm run dev 就可以了 ...
Vue在IE下打开空白解决方案
weixin_42066070的博客
04-13 1656
不需要装babel-polyfill ！！！ 首先说前置条件： 使用的Vue Cli 4.x 创建的项目 package.json里面的devDependencies节点中的@vue/cli-plugin-babel版本是4.x 装了babel-polyfill请卸载掉npm uninstall babel-polyfill，因为@vue/cli-plugin-babel里面已经包含了这个玩意 vuejs的版本是2.x 然后可以看官方文档了：浏览器兼容性 | Vue CLI 先看我的解决方案，总
Webpack 5 超详细解读（一）
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
11-21 938
需要有一个工具站出来解决问题，可以让开发者在入口的地方随心所欲，用个人喜欢的技术栈完成开发，从而不需要关系过程，但是最终的结果可以在浏览器上正常展示，因此这里就会用到打包工具。回到初始思路上，我们需要less-loader将less文件编译为css文件，其次使用css-loader搭配style-loader，将css样式编译至html文件中，所以需要进行配置，配置思路与css相同。伴随着AJAX的诞生，前端的工作模式也发生了很大变化，前端不仅仅是展示界面，而且还可以管理数据以及和用户进行数据的交互。
处理css/js兼容性的工具之超重要的browserslist
hello ice cream
04-06 832
这篇 webpack处理css资源 文章中使用到的工具 browserslist 对于兼容性处理来说非常重要！这一篇来仔细说说。 查询兼容性 不同浏览器对于 css / js 的属性可能存在兼容性，具体可以通过 can i use 这个网站查询。 比如 css 中的 user-select 属性，用于规定是否可以在浏览器上双击选取或者高亮，在 ie 6-9 中不可以使用，在 ie10-11 中需要添加 -ms- 前缀。 也就是说，为了多浏览器兼容性处理，css代码可能要写成这样 -webkit-user-
描述一下Vue-cli工程目录结构
04-23
Vue-cli工程目录结构通常包含以下文件和文件夹： - node_modules：包含依赖的第三方库和插件。 - public：包含静态资产，如图像、字体和HTML文件。 - src：包含应用程序的所有源代码。 - assets：包含应用程序使用的图像、媒体和样式表等资源。 - components：包含应用程序的所有组件。 - router：包含应用程序的路由配置。 - store：包含应用程序的状态管理配置。 - views：包含应用程序的各个视图。 - App.vue：应用程序的根组件。 - main.js：Vue.js应用程序的入口点。 以上是Vue-cli工程目录的一般规范，具体的结构可以根据需求进行修改和自定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值