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

前置信息

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

创建vue2项目

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

• 创建vue2项目
  
  提示：按上下键可以选择，按Enter键进入下一项配置
  
  提示：可以按空格进行选中，再按一次取消选中
  解释：
  • Babel：将es6转为es3
  • Router：路由
  • VueX：管理数据状态，方便组件间的数据共享
  • CSS Pre-processors：less/scss
  • Linter / 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）

1. 安装lib-flexible插件和postcss-px2rem插件
   安装命令：
   npm install lib-flexible -D
   npm install postcss-px2rem --save
   作用：
   lib-flexible：主要用于设置html根元素的font-size，通过修改根元素的字体大小来适配不同分辨率的屏幕
   postcss-px2rem：把px转为rem

2. 安装报错了，如下图
   

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

4. 我们这时候再去安装自适应配置的两个插件：lib-flexible插件和postcss-px2rem插件，可以看到安装成功了
   
   

5. 在main.js文件中引入lib-flexible插件，如下图
   

6. 点开vue.config.js，添加下图中红框中的代码
   

7. 为了测试是否生效，我们给AboutView.vue中添加一点内容，看看设置的字号font-size是否会被转化为rem单位
   

8. 重启项目，点击页面中的About，把鼠标放在This is an about page的字上，右键点击检查，可以在下面的Styles框中看到设置的关于h1的font-size：80px已经转化为rem单位
   
   点击console可以看到我们的lib-flexible插件也起作用了
   

less配置

less在我们创建项目的时候就已经配置好了，我们可以写一些东西看看它是否会生效
我们在aboutview.vue（当然你也可以自己找个组件写，这个随意）里写一些东西，看看是否会生效

可以看到样式生效了