五分钟教你使用vue-cli3创建项目(新手入门)

下面我将为您详细讲解“五分钟教你使用vue-cli3创建项目(新手入门)”的完整攻略。

简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，可用于快速搭建项目。Vue CLI3 是 Vue CLI 的升级版本，提供了更友好、更强大、更快捷的项目脚手架。

环境准备

在使用 Vue CLI3 创建项目之前，您需要先确保安装了 Node.js 环境和 npm 包管理器，这是本文最基本的要求。

在确认已经安装好 Node.js 和 npm 之后，打开命令行终端并输入以下命令：

npm install -g @vue/cli

该命令使用 npm 安装了 Vue CLI3。在安装完成之后，你可以通过运行 vue -V 命令来检查 Vue CLI3 是否安装成功。

创建项目

在安装好 Vue CLI3 的前提下，我们可以很容易的通过它来创建新的项目。在命令行终端中进入您要创建项目的目录中，输入如下命令：

vue create my-project

其中 my-project 可以替换成您想要的项目名称。该命令会自动创建一个新的 Vue 项目。

在项目创建过程中，您需要选择手动配置或默认配置。如果您是新手，我们建议您选择默认配置。

运行项目

创建完项目之后，您可以在项目目录中找到 package.json 文件，在该文件中，包含了项目的所有依赖。

要运行项目，您可以在命令行终端中进入项目目录，输入如下命令：

npm run serve

该命令将启动一个本地服务，您可以在浏览器中访问 http://localhost:8080 来查看您的新应用程序。

示例说明

下面我们来看两条示例说明。

示例一

我们来试着创建一个新项目，并启动它。在命令行终端中分别输入以下命令：

vue create my-project
cd my-project
npm run serve

这时候，您已经成功创建了一个新的 Vue 项目，并且启动了本地服务，可以在浏览器中访问 http://localhost:8080 来访问应用程序。

示例二

假如您在创建项目的时候不想用默认的配置，而是根据您的需求来手动配置项目，那么您可以参考以下步骤：

vue create my-project
? Please pick a preset: Manually select features
? Check the features needed for your project:（使用空格来选中）Check the features needed for your project:
 ( ) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
❯( ) Unit Testing
 ( ) E2E Testing

根据您的需求选择需要的组件和库，选择完成之后保存配置，等待项目创建完成。接下来，在命令行中进入项目目录，并输入以下命令：