vue2-04-利用VueCli脚手架搭建vue2项目步骤、目录解读、eslint缩进配置、自适应配置、less

唐小橘子 2024-09-13 15:33:01 阅读 74

前置信息

我用的代码编译器是VSCode，node版本是16.20.2，npm版本是8.19.4，项目选用的是less预处理，npm安装依赖。

创建vue2项目

来到项目安装目录，输入cmd进入黑窗口

在这里插入图片描述

创建vue2项目

在这里插入图片描述

提示：按上下键可以选择，按Enter键进入下一项配置

在这里插入图片描述

提示：可以按空格进行选中，再按一次取消选中

解释：

Babel：将es6转为es3Router：路由VueX：管理数据状态，方便组件间的数据共享CSS Pre-processors：less/scssLinter / Formatter：eslint校验代码格式

在这里插入图片描述

到这里项目就创建完成了，项目等待一会就创建好了，如下图：

在这里插入图片描述

目录解读

如果我下面的解释不太清楚的话，你也可以去问问ai，我平常用“文心一言”和“kimi”，百度一搜就有了。

创建好的项目目录如下：

在这里插入图片描述

VUE2-EXAMPLE： 项目名称。node_modules： 包含项目中使用的依赖包。public： 包含项目的入口文件，如index.html，以及一些静态资源。src： 项目源代码的目录。

assets： 用来存放静态资源，如图片、样式表、字体等。components： 存放Vue组件。router： 用来配置项目中路由。store： 存放Vuex状态管理的相关代码。views： 存放视图组件，这些组件通常对应路由的页面App.vue： 项目中根组件，所有的页面（组件）都是在App.vue下进行渲染的。main.js： 入口文件，通常用于挂载Vue实例，以及引入全局资源。 .browserslistrc： 用于指定项目的目标浏览器的范围，用于Babel等工具，以确保代码能够在这些浏览器上正常工作。.editorconfig： 帮助开发者在不同的编辑器和IDE之间维护一致的编码风格，它定义了诸如缩进大小、换行符类型、尾随空格等编码规则。.eslintrc.js： ESlint的配置文件，用于定义JavaScript代码的编码规范和风格。.gitignore： Git忽略文件，用于指定Git不需要跟踪的文件和目录，如node_modules目录等。babel.config.js： Babel配置文件，用于定义如何将使用ES6+编写的代码转换为向后兼容的JavaScript代码，以便在旧版浏览器中运行。jsconfig.json： 为JavaScript项目提供智能感知、丰富的代码提示、跳转定义、代码重构等功能的配置文件。package-lock.json： 锁定项目依赖的具体版本号，确保项目在不同环境中安装时具有一致的依赖。package.json： 项目的元数据文件，包含项目名称、版本、依赖列表、脚本信息等。npm和yarn依赖这个文件来安装和管理项目的依赖。README.md： 项目的说明文件vue.config.js： Vue CLI的配置文件，用于修改默认的webpack配置或其他Vue CLI插件的配置，你可以在这里添加自定义的webpack插件、loader，或者修改构建过程中的行为。

在VSCode中启动项目

点击VSCode左上角“文件”，点击“打开文件夹”，选中你的项目（我的项目是vue2-example），再点击“选择文件夹”，这样就打开你的项目了。接着点击VSCode上方的“终端”，点击“新建终端”，在命令行中输入“npm run serve”启动项目。启动成功后截图如下：

在这里插入图片描述

你可以复制上图中 Local 中的链接 http://localhost:8080/ 到浏览器中打开，或者把鼠标放在那个链接上，按住Ctrl，然后点击链接可以直接跳转打开页面了。链接打开后看到这个页面，说明项目已经启动成功了。

在这里插入图片描述

eslint配置

eslint在我们创建项目的时候就已经勾选上了，基本的配置VueCli脚手架已经给我们配好了，例如我故意弄几个错误（在script和style标签前面故意加了几个空格），项目会报错，按Ctrl+S后会自动修复错误。

如果你的项目不会自动修复，那么我推荐你去看看B站黑马老师的这3节视频：P88、P89和P90，真的讲的很详细，推荐！！！

B站黑马视频链接： 前端最新Vue2+Vue3基础入门到实战项目全套教程

在这里插入图片描述

但是这个时候如果你去在div标签前面加上几个空格，发现不会报错，并且也不会修复成你想要的样子（毕竟没报错嘛），如下图：

在这里插入图片描述

那么如果我想让html标签也会报错并且“自动修复” 该如何做呢？（也就是自动缩进2或者4字符）

首先打开.eslintrc.js文件，找到rules，添加下面这条命令（如下图中红框圈住的代码）

一般来说添加上后保存代码会立即生效，如果不生效的话可以退出VSCode重进，你可以去故意去html标签如div标签前面打几个空格看看是否生效。

我习惯的是缩进4个字符，如果你喜欢2个字符的话可以把代码中的4改为2

在这里插入图片描述

有时候我们希望一些文件中不想要eslint检查，那么我们可以在package.json中添加如下红框中的代码（下图中，node_modules中的文件和vue.config.js中的文件不会被eslint检查）

在这里插入图片描述

自适应配置（px自动转rem）

安装lib-flexible插件和postcss-px2rem插件

安装命令：

npm install lib-flexible -D

npm install postcss-px2rem --save

作用：

lib-flexible：主要用于设置html根元素的font-size，通过修改根元素的字体大小来适配不同分辨率的屏幕

postcss-px2rem：把px转为rem

安装报错了，如下图

在这里插入图片描述

看来是我们项目eslint-plugin-vue的版本有问题（可以在package.json中查看各个插件的版本），把eslint-plugin-vue的版本改为7.0.0，安装命令为npm install eslint-plugin-vue@^7.0.0 -D，注意不用卸载eslint-plugin-vue插件直接安装新版本即可，因为新安装的插件会覆盖之前的插件

在这里插入图片描述