10分钟上手vue-cli 3.0 入门介绍

什么是vue-cli 3.0

vue-cli是一套通过命令行工具帮助我们快速创建Vue.js项目开发环境的脚手架工具。其3.0版本带来了更好的用户体验和更快的构建速度。

安装vue-cli 3.0

首先，我们需要安装node.js和npm。安装完毕后，打开命令行窗口，输入以下命令进行全局安装vue-cli：

npm install -g @vue/cli

Vue-cli 3.0是基于Vue cli 3.0进行的升级，生成的命令行工具从vue改为vue-cli，构建工具也从webpack改为了@vue/cli-service。

我们还需要检测一下vue-cli版本信息是否正确，如果没有安装vue-cli则无法获得版本信息，进行如下操作：

vue -V

如果版本信息如下，则代表安装成功：

@vue/cli 3.7.0

创建一个Vue.js项目

接着，我们可以在任意的目录下创建一个Vue.js项目。以my-project为例：

vue create my-project

执行完上述命令后，会让我们进行相关配置，如选择使用那些插件和特性等。也可以使用默认配置，按下回车键即可。

运行Vue.js开发环境

完成创建项目后，我们可以运行如下命令，启动开发环境：

cd my-project
npm run serve

在浏览器中输入http://localhost:8080/就可以看到Vue.js的默认欢迎页面了。

构建Vue.js生产环境

当我们开发完成后，我们需要将我们的代码打包成线上环境使用的代码。通过如下命令即可完成打包：

npm run build

完成后，我们会在 /dist 目录下生成一个静态文件，可以直接使用或部署到服务器上。

示例如下：

示例一：使用vue-cli创建一个Vue.js项目

我们可以在任意的目录下使用如下命令创建一个Vue.js项目：

vue create example-project

执行完上述命令后，会让我们选择要安装什么依赖，也可以直接按下回车键使用默认配置。

示例二：启动一个Vue.js项目的开发环境

在项目根目录下执行如下命令即可启动开发环境：

npm run serve

这时，在浏览器中输入http://localhost:8080就可以看到Vue.js的默认欢迎页面啦！