第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架

Vue CLI 是一个用于快速搭建 Vue.js 项目的脚手架工具。它集成了开发所需的各种工具和常见配置，让你可以专注于编写代码而不用为构建过程烦恼。本教程将介绍如何使用 Vue CLI 来搭建一个基本的 Vue.js 项目。

步骤 1：安装 Node.js

在开始之前，请确保你的计算机已经安装了 Node.js。你可以从 https://nodejs.org/ 下载并安装 Node.js 的最新版本。
当前版本 v16.14.2
可通过 node -v 查看对应版本

步骤 2：安装 Vue CLI

在命令行中运行以下命令来安装 Vue CLI：

npm install -g @vue/cli

这将全局安装 Vue CLI，以便你可以在任何目录下使用 vue 命令。

当前版本 8.5.0
可通过 npm @vue/cli -v 查看对应版本

步骤 3：创建新的 Vue 项目

在命令行中，进入你想要创建项目的目录，然后运行以下命令来创建一个新的 Vue 项目：

vue create my-vue2

这将创建名为 my-vue2 的新项目。在创建过程中，根据步骤选择你喜欢的选项，然后等待项目创建完成即可。

// 选择一个预设配置
? Please pick a preset: 
 Default ([Vue 3] babel, eslint) // Vue3 
 Default ([Vue 2] babel, eslint) // Vue2 当前选择了这个
 Manually select features // 手动选择所需特性，例如适用于单页面应用 (SPA) 或多页面应用 (MPA) 的路由，状态管理等。

// 安装依赖项时使用的包管理器
? Pick the package manager to use when installing dependencies: (Use arrow keys)   Use Yarn
  Use NPM // 当前选择了这个

注意： 如果在创建项目时遇到问题，可能是因为你的网络环境无法访问 NPM 源。你可以尝试使用如下命令切换到淘宝镜像：

npm config set registry https://registry.npm.taobao.org/

这将安装淘宝镜像的命令行工具 cnpm。然后，你可以使用 cnpm 命令替代 npm 来安装依赖和运行其他 npm 命令。

步骤 4：运行开发服务器

项目创建完成后，使用以下命令进入项目目录：

cd my-vue2

然后运行以下命令来启动开发服务器：

npm run serve

这将编译项目并启动一个开发服务器。在控制台中会显示你的项目的本地访问地址。打开该地址，你将看到一个基础的 Vue 应用程序。

恭喜！你已经成功地使用 Vue CLI 搭建了一个 Vue.js 项目。现在你可以开始开发你自己的 Vue 应用程序了。尽情发挥创造力吧！

目录结构

my-vue2
├─ public // 公共静态资源。等同于`static`目录
│  ├─ favicon.ico // 网站标志,
│  └─ index.html // 入口
├─ src // 源码目录
│  ├─ assets // 资源
│  ├─ components // 组件
│  ├─ router // 路由
│  ├─ App.vue // 根组件
│  └─ main.js // 人口js
├─ babel.config.js // bable编译参数
├─ jsconfig.json // 编辑器支持和模块解析
├─ package.json // 项目基本信息
└─ vue.config.js // Vue配置文件

package.json 说明

• package.json文件配置了项目的基本信息、依赖项、脚本和配置。下面是对每个字段的解释：
• name 项目的名称，这里是 my-vue2。
• version 项目的版本号，这里是 0.1.0。
• private 设置为 true，表示该项目是私有的，不应该被发布到公共的软件注册表中。
• scripts 定义了一些命令脚本。这里有三个脚本命令：
  serve 用于运行项目的开发服务器。
  build 用于构建项目的生产版本。
  lint 用于运行 ESLint 进行代码检查。
• dependencies 列出了项目在运行时所依赖的库。
• devDependencies: 列出了项目在开发过程中所依赖的开发工具和库。
• eslintConfig 配置了 ESLint 的规则。
• browserslist 配置了项目所支持的目标浏览器和 Node.js 版本:
  > 1% 要求目标浏览器的使用量占全球使用率大于 1%。
  last 2 versions 要求目标浏览器的最近两个版本。
  not dead 排除已被官方宣布不再支持的浏览器版本。

框架搭建整体流程

• 第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架
• 第二步 Vue2 vue.config.js 基础配置，路径别名alias
• 第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量
• 第四步 Vue2 配置ESLint
• 第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩
• 第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui
• 第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin

点击下载步骤 1-7 配置完成的完整 Demo