vue-cli

一、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

二、入门

• 创建项目

vue create ...
# OR
vue ui

• 编译：产生一个dist目录，里面是可部署到服务器上的代码，代码已经被压缩过了（css、img、js）

npm run build

三、模块化的发展

1. require.js异步模块加载，A（异步）M（模块）D（载入），通过配置做AJAX请求并解析内容，将内容执行。最初解决模块化的方法，如今很少这样操作。
2. 如今使用webpack可以实现打包、编译和热加载的功能。将.js .hbs .sass .jpg等转换为浏览器可以识别的.js .css .jpg .png。可以实现模块化和依赖化的关系

// 输入webpack之后会找到webpack.config.js配置文件，实现全局打包
webpack
// 实时监听编译的变化
webpack-dev-server