Vue2.0脚手架搭建

什么是Vue脚手架

Vue脚手架通常是指在开始Vue项目开发时所使用的一个基础模板，它会为我们预先搭好项目的基础结构，例如自动引入Vue，预定义一些常用文件夹例如views、utils等，还会自动配置webpack等工具，从而可以省去我们手动搭建项目基础结构的时间和精力。当前比较常用的Vue脚手架工具有Vue-cli 2.x和Vue-cli 3.x，本文主要介绍Vue-cli 2.x的使用方法。

Vue-cli 2.x脚手架搭建步骤

1.安装Node.js和npm

在安装Vue-cli 2.x之前，我们需要先安装Node.js和npm， Node.js是一个Javascript运行环境，而npm则是Node.js的包管理工具，我们可以通过npm来安装和管理我们需要的第三方模块以及Vue-cli 2.x工具。

2.安装Vue-cli 2.x

在安装好Node.js和npm之后，我们就可以通过npm来安装Vue-cli 2.x，我们可以在终端中输入以下命令安装：

npm install -g vue-cli@2.9.6

3.创建Vue项目

安装好Vue-cli 2.x后，我们就可以通过命令行工具使用Vue-cli 2.x来创建我们的Vue项目，具体步骤如下：

• 在命令行工具中进入你想要保存项目的路径

• 执行以下命令来创建Vue项目

bash
vue init webpack my-project

其中my-project为你想要创建的项目名称。

• 在执行上述命令后，我们会看到一系列的配置选项，例如Babel、eslint等，根据自己的需要进行选择，或者直接使用默认配置。

• 在配置完成后，我们会发现在当前路径下多出了一个my-project文件夹，而项目中的一些基本配置文件已经被预设好了。

4.安装项目依赖并启动项目

在项目文件夹内，通过终端进入这个文件夹，然后执行以下两个命令来安装项目依赖并启动项目：

• 安装项目依赖

bash
npm install

• 启动项目

bash
npm run dev

在启动项目后，我们可以通过访问http://localhost:8080来访问我们创建的Vue项目。

Vue-cli 2.x项目模板

在Vue-cli 2.x中，我们可以借助模板来快速创建一个通用的Vue项目，这样我们就可以更加方便地进行后续开发工作。以下是两个常用的Vue-cli项目模板：

1.vue-cli-template

Vue-cli-template是官方提供的、默认的Vue项目模板，它提供了一个基础的Vue项目结构，包含了Webpack、ESLint等常用工具。使用方式如下：

vue init webpack-simple my-project

2. vue-admin-template

vue-admin-template是一个适用于中后台管理系统开发的项目模板，它是基于vue.js 2.x和element UI的。

vue init PanJiaChen/vue-admin-template my-project

以上就是Vue2.0脚手架的搭建步骤和一些常用的Vue-cli项目模板的介绍，希望对你有所帮助。