vue-cli创建vue项目的两种方法

2023-12-08 00:46:25

前言

Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它使用组件化开发，使您能够轻松地创建可重用的组件，并将其组合成复杂的应用程序。

Vue.js CLI是一个命令行界面工具，可帮助您快速轻松地创建和管理Vue.js项目。它提供了多种命令，可用于创建项目、生成脚手架代码、运行项目等等。

方法一：使用终端命令行创建项目

安装Vue.js CLI

首先，您需要在您的计算机上安装Vue.js CLI。您可以使用以下命令来安装Vue.js CLI：
```
npm install -g @vue/cli
```
或者使用yarn安装
```
yarn global add @vue/cli
```
创建项目

安装Vue.js CLI后，您就可以使用它来创建项目了。在终端中，导航到您要创建项目的目录，然后输入以下命令：
```
vue create project-name
```
其中，project-name是您要创建的项目的名称。
选择项目模板

在创建项目时，您可以选择一个项目模板。项目模板是一个预定义的项目结构，其中包含了一些基本的代码和文件。Vue.js CLI提供了多种项目模板，您可以根据自己的需要选择一个合适的模板。
安装依赖

创建项目后，您需要安装项目的依赖。您可以使用以下命令来安装项目的依赖：
```
npm install
```
或者使用yarn安装
```
yarn install
```
运行项目

安装完项目的依赖后，您就可以运行项目了。您可以使用以下命令来运行项目：
```
npm run serve
```
或者使用yarn运行
```
yarn serve
```

如果您不喜欢使用终端命令行，也可以使用图形界面来创建项目。您可以使用Vue.js CLI提供的Vue UI工具来创建项目。

安装Vue UI

首先，您需要在您的计算机上安装Vue UI。您可以使用以下命令来安装Vue UI：
```
npm install -g @vue/ui
```
或者使用yarn安装
```
yarn global add @vue/ui
```
运行Vue UI

安装Vue UI后，您就可以运行它了。在终端中，输入以下命令来运行Vue UI：
```
vue ui
```
选择项目模板

在Vue UI中，您可以选择一个项目模板。项目模板是一个预定义的项目结构，其中包含了一些基本的代码和文件。Vue UI提供了多种项目模板，您可以根据自己的需要选择一个合适的模板。
创建项目

选择项目模板后，您就可以创建项目了。在Vue UI中，单击“创建项目”按钮，然后输入项目的名称和位置。
安装依赖

创建项目后，您需要安装项目的依赖。Vue UI会自动安装项目的依赖。
运行项目

安装完项目的依赖后，您就可以运行项目了。在Vue UI中，单击“运行项目”按钮，然后项目就会在浏览器中打开。