如何用vuecli开发app

Vue CLI是一个脚手架工具，它能够帮助我们快速搭建Vue.js项目的基本架构，使我们能够专注于业务逻辑的开发。

Vue CLI的安装

首先，我们需要安装Vue CLI。在终端中输入以下命令：

```

npm install -g @vue/cli

```

这将在全局安装Vue CLI。

创建Vue项目

创建Vue项目非常简单，只需要在终端中输入以下命令：

```

vue create my-project

```

其中，my-project是你的项目名称。执行该命令后，Vue CLI会自动下载所需的依赖包，并创建一个基本的Vue.js项目结构。

Vue CLI提供了三种模式来创建项目：

- default

- Manually select features

- Vue UI

default是默认模式，它会创建一个基本的Vue.js项目结构。Manually select features是手动选择功能模式，它会列出可用的功能，供你选择需要的功能。Vue UI是基于Web界面的模式，它允许你在Web界面上进行项目管理。

项目结构

创建Vue项目后，你会看到以下的项目结构：

```

my-project/

├─ node_modules/

├─ public/

│ ├─ favicon.ico

│ └─ index.html

├─ src/

│ ├─ assets/

│ │ └─ logo.png

│ ├─ components/

│ │ └─ HelloWorld.vue

│ ├─ App.vue

│ └─ main.js

├─ .gitignore

├─ babel.config.js

├─ package-lock.json

├─ package.json

└─ README.md

```

其中，node_modules目录包含了项目所需的所有依赖包。public目录包含了静态资源，比如HTML文件和图标。src目录包含了源代码。.gitignore文件包含了Git需要忽略的文件。babel.config.js文件包含了Babel的配置信息。package-lock.json文件包含了项目的依赖包版本信息。package.json文件包含了项目的基本信息和依赖包列表。README.md文件包含了项目的文档信息。

启动Vue项目

在终端中输入以下命令，启动Vue项目：

```

cd my-project

npm run serve

```

这将启动一个开发服务器，你可以在浏览器中访问http://localhost:8080来查看项目的效果。在你修改代码后，开发服务器会自动重新编译代码，并刷新浏览器，以便你查看最新的效果。

打包Vue项目

在终端中输入以下命令，打包Vue项目：

```

npm run build

```

这将生成一个dist目录，其中包含了打包后的代码。你可以将dist目录中的所有文件上传到Web服务器上，以便用户访问你的网站。

总结

Vue CLI是一个非常实用的工具，它能够帮助我们快速搭建Vue.js项目的基本架构。在使用Vue CLI创建项目后，我们只需要关注业务逻辑的开发，而不需要过多关注项目结构和依赖包的管理。