vue项目启动命令_创建第一个 Vue 项目

本文来源于 「Vue 虚拟实验室」yghen 的分享，由素燕进行修改。

Vue 官方提供了 Vue-CLI 工具来创建项目，这一节内容我们主要学习 它能干什么，以及在 「Vue 虚拟实验室」中是如何被使用的。

Vue-CLI (command-line interface)是创建 Vue 项目的一个官方命令工具，帮助开发者快速创建一个应用。在开发 Lovue 这个项目的时候，就是通过这个工具创建的。在使用之前，需要通过命令安装：

npm install -g @vue/cli

npm 有时候比较慢，可以通过 cnpm 来安装。

安装完 Vue-CLI 工具后，可以通过两种方式创建项目：

1、命令

通过 vue create ivue 来创建一个项目，项目名称为 ivue，可以直接选择默认的配置，也可以自己手动选择项目中需要用到的特性：

Vue CLI v4.2.3? Please pick a preset: (Use arrow keys)❯ default (babel, eslint)  Manually select features

我们直接选择默认的创建方式。创建完成后，执行命令：

 $ cd ivue $ npm run serve

直接在浏览器输入下面的地址，即可看到一个默认的页面：

http://192.168.8.210:8080/

2、UI

可以通过 vue ui 来打开一个图形界面来创建项目。

Lovue 这个项目就是通过 Vue-CLI 创建的，那么如何才能在本地运行这个项目呢？

「Vue 虚拟实验成员」@yghen 成员写了一条 tip：

lovue 是一个通过 vue cli3.0+ 搭建的项目。在跑通这个项目之前，首先需要在本地安装 node 和 npm，已安装的请忽略。

把代码 lovue 拉取下来：

git clone git@github.com:Lovuey/lovue.git

项目结构如下图：

进入 Lovue 项目文件夹下(cd lovue/lovue/)，执行 npm install，npm 会根据 package.json 配置文件安装依赖，所有的包都会下载到 node_modules 文件夹。

通过 npm run serve 启动项目服务，这句命令让 npm 去执行package.json 中 serve 命令。如下图：scripts 是配置脚本依赖，分别定义了serve、build、lint 对应的执行脚本。

也可以这样启动，在项目根目录下执行 ：

./node_modules/.bin/vue-cli-service serve --open

 服务启动后自动开启浏览器，并正常显示页面：

总结

本文主要学习了如何通过 Vue-CLI 创建项目，并跑通 Lovue 项目。关于 Vue-CLI 还有很多有用的工具，大家可以在官网中查看。

---

推荐阅读：

学习与实践相结合 · Vue 虚拟实验室近况

学习 Vue 从如何贡献代码开始

第六阶段 · 期待已久的 Vue

https://cli.vuejs.org/zh/guide/