Vue-cli 介绍与安装

什么是 Vue-cli？

Vue-cli 是 Vue.js 官方提供的一个脚手架工具，可以帮助我们快速的搭建 Vue 项目开发所需要的基础环境。

安装Vue-cli

安装 Vue-cli 要求 Node.js 的版本在 8.9 或更高，NPM 版本在 5.5 或更高。

全局安装

开启终端并输入以下命令即可进行全局安装：

npm install -g vue-cli

本地安装

进入到项目目录中执行以下命令进行本地安装：

npm install --save-dev vue-cli

快速搭建项目

使用 Vue-cli 快速搭建 Vue 项目

在终端中进入想要创建 Vue 项目的文件夹，运行以下命令，按照提示进行配置：

vue init webpack my-project

其中 "my-project" 为我们创建的项目名称。

使用 Vue-cli 快速搭建 Vue 单文件组件

在终端中脚手架项目的 src/components 目录下创建 my-component.vue 文件，输入以下代码：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world!'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>

运行以下命令创建本地测试环境：

npm run dev

浏览器中输入 http://localhost:8080/my-component.html 测试该组件是否成功渲染。

结论

通过使用 Vue-cli 可以在一定程度上节约我们搭建项目的时间，使我们能够更快速的开始我们的具体业务功能的开发。