43

学习 Vue(一):Vue CLI

 4 years ago
source link: https://www.tuicool.com/articles/JBnQVjB
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK