学习 Vue(一):Vue CLI

Vue CLI 是 Vue 官方提供的命令行工具,提供了以下功能:

  • 项目脚手架;
  • 零配置的快速原型;
  • 基于 webpack 的运行时依赖;
  • 插件;
  • 用于管理 Vue.js 项目的 UI 界面。

安装

使用 Vue CLI,官方推荐使用 Node.js 8.11.0 以上版本。使用 Node.js 包管理工具 npm 全局安装:

npm install -g @vue/cli  

安装成功,查看帮助信息:

vue -h  

创建项目

Vue CLI 提供了架手架功能帮助快速创建 Vue 工程。

使用默认的预设配置创建 Vue 工程:

vue create -d vue-demo  

使用已存在的预设配置创建 Vue 工程:

vue create -p <预设配置> vue-demo  

使用命令行提示创建 Vue 工程:

vue create vue-demo  

使用 Vue CLI UI 创建 Vue 工程:

vue ui  

开发

Vue CLI 提供了一个基于 webpack-dev-server 支持模块热重载的开发服务器。

启动开发服务器:

npm run serve  

或者

vue-cli-service serve  

当代码保存修改,开发服务器会自动重新编译并重新刷新浏览器。

构建

编译并压缩,输出到 dist 目录。

npm run build  

或者

vue-cli-service build