Vue 项目构建与开发入门:Vue CLI 3 项目构建基础

目录

依赖工具

脚手架

1. 什么是脚手架

2. vue-cli

a. 安装

b. 构建

c. 启动

d. 目录结构

3. 可视化界面

你还需要了解什么

结语

---

大家好，当你点进这个标题，开始阅读本章的时候，说明你对 Vue.js 是充满好奇心和求知欲的。我之前写过一篇文章，这样评价 Vue.js，称它是“简单却不失优雅，小巧而不乏大匠”的作品，正如其官网介绍的“易用，灵活和高效”那样。其实框架是 Vue.js 的本质，而真正了解它的人则会把它当成一件作品来欣赏。

Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相对其他框架来说算是占据优势的，越来越多的人开始投入 Vue.js 的怀抱，走进 Vue.js 的世界。那么接下来屏幕前的你不妨一起来和我从零开始构建一个 Vue 项目，体会一下 Vue.js 的精彩绝伦。

依赖工具

在构建一个 Vue 项目前，我们先要确保你本地安装了 Node 环境以及包管理工具 npm，打开终端运行：

# 查看 node 版本
node -v

# 查看 npm 版本
npm -v

如果成功打印出版本号，说明你本地具备了 node 的运行环境，我们可以使用 npm 来安装管理项目的依赖，而如果没有或报错，则你需要去 node 官网进行 node 的下载及安装，如图：