小白级教程:使用Vue CLI搭建vue2项目_mac搭建vue2项目

#前置条件#

 已安装完运行vue所需的环境配置node,npm,vue等，且安装版本差异正常。

一. 建立放置项目的文件夹，并将文件夹在vscode编辑器或电脑终端中打开。在终端，输入⬇️

vue create objectName  //objectName为项目名称

二. 在返回结果中，选择需要的vue版本与模式

（键盘方向键上下切换，回车键Enter确定）

 Default ([Vue 2] babel, eslint)                           // 选择vue2版本
 Default (Vue 3) ([Vue 3] babel, eslint)              // 选择vue3版本
 Manually select features                                  // 选择自定义手动配置

---

#⚠️#

由前两个模式选项所创建的项目无任何vue相关插件（vue-router,vuex等，需要单独另行安装。） 

---

三. 自定义手动配置（ Manually select features 配置项）

### vue2与vue3的自定义配置不一样，此文章只讲述vue2,

（键盘方向键上下切换，空格进行选中）

Please pick a preset: Manually select features          // 请选择一个预设:手动选择功能

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)                                                      // 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择)

• ◉ Choose Vue version                                         //  选择Vue版本

• ◉ Babel                                                                //  可将将 es6 转成 es5

• ◯ TypeScript                                                        //  通过添加类型来扩展 JavaScript
• ◯ Progressive Web App (PWA) Support             //  渐进式Web应用程序（PWA）支持
• ◉ Router                                                              //  Vue Router 路由
• ◉ Vuex                                                                 //  Vuex状态管理模式
• ◉ CSS Pre-processors                                        //  CSS预处理器
• ◉ Linter / Formatter                                             // 格式化程序
• ◯ Unit Testing                                                      //  单元测试
• ◯ E2E Testing                                                     //  端到端

1.手动配置：选项常规如下方式选择，完成后回车。

2. 手动配置：选择需要的vue版本，完成后回车。（这里选择vue2）

Choose a version of Vue.js that you want to start the project with (Use arrow keys)              // 选择你想要启动项目的Vue.js版本(使用方向键)

3. 提示是否使用历史模式？输入n是否，Y是使用，完成后回车。（这里使用Y不使用）

4.提示选择CSS 预处理器，node-sass 是自动编译实时生效，dart-sass 保存后才会编译生效，（建议选择 Sass/SCSS(with dart-sass)），完成后回车即可。

5.提示选择eslint 校验规则。（建议选择默认配置第一个），即完成后回车即可。

6.提示什么时间进行代码校验。Lint on save 保存时检查， Lint and fix on commit 提交时检查，（建议选择第一个），即完成后回车即可。

7.提示如何存放配置，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中，（建议选择第二个配置），即存放到 package.json 文件中，完成后回车即可。

8.提示是保存本次配置。(建议选择 N)，即不保存，否则以后创建项目修改不配置不太方便，完成后回车即可。

---

至此，项目配置完成等待结果。

感谢观看👍