命令行界面（Command-Line Interface，CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行，也有人称之为字符用户界面（CUI），而Vue-Cli 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue脚手架之后我们开发的页面将是一个完整的系统。
在正式介绍Vue脚手架之前，我们首先需要了解Node.js的基本概念、NPM的基本概念、模块化的基本概念以及Webpack的基本概念，通过对前端工具的整体化理解才能浅析Vue脚手架的实现逻辑。这里采用的是vue-cli2即vue init webpack projectname的方式来初始化生成脚手架的。
Node.js基本概念
浏览器的内核包括两部分核心：
①DOM渲染引擎
②JavaScript解析引擎：Chrome浏览器内置V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
在此基础上的Node.js是一个基于Chrome V8引擎的JavaScript运行环境：即Node.js内置Chrome的V8 引擎，可以在Node.js环境中直接运行JavaScript程序，而在Node.js中写JavaScript和在Chrome浏览器中写JavaScript基本没有什么不一样，其不同点仅在于Node.js没有浏览器API，即document，window的等等，但是在原先基础上增加了许多Node.js 专属API，例如文件系统，进程，HTTP等功能。
如果你想开发类似JavaWeb的简单的后端程序，那么学习Node.js是一个非常好的选择。如果你想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。通常它会被用来作一个BFF层，即 Backend For Frontend（服务于前端的后端），通俗的说是一个专门用于为前端业务提供数据的后端程序。
BFF等价于用户体验适配器
BFF能解决什么问题？
一个前端页面向Service A、Service B 以及 Service C发送请求，不同的微服务返回的值用于渲染页面中不同的组件。此时，每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合Service A、Service B 以及 Service C响应的数据，这个服务层叫做BFF。
手机、平板端、PC机等用户终端都需要向每个Service，例如Service A发送请求。对于同一个功能，不同的终端需要的数据格式和内容会有不同。此时 Service A 的一个接口，不能同时满足三个客户端的不同需求。我们可以在Service A中开发三个接口，也可以增加一个数据裁剪服务，将数据按照不同终端的不同要求进行裁剪，这个服务层叫做BFF。
Nodejs的安装：对于不同版本的Nodejs可以通过NVM来进行管理和控制，可点击：NVM的使用教程
**Nodejs的简单功能使用：**在VSCode中创建简单的JS程序后可以在当前目录下通过node 文件名来运行
引入Nodejs概念的目的在于为后续将HTML页面部署到服务器上通过浏览器来访问做铺垫，例如在Vue Cli中执行npm run dev后将可以通过http://localhost:8080（默认）来访问前端页面，同时也是为了引出NPM的含义
NPM基本概念
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven ，在命令行中输入npm -v即可查看当前的NPM版本，当我们想使用NPM来管理我们的前端项目时，一般可以在根目录下输入npm init来进行项目的初始化，在初始化的过程中系统会提示我们输入相关的信息比如
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
如果我们仅仅只是想尽快生成package.json文件那么只需要直接执行npm init -y即可
对于一个前端项目而言，我的理解是NPM为我们提供了统一化的依赖管理手段，例如引入JQuery、ElementUI等等第三方库，这些都体现在package.json的dependencies和devDependencies参数中，同时也为我们提供了统一化的配置文件管理方式，例如在package.json中配置的项目名称、版本号、描述以及作者等等以及关键的scripts参数可以大大简化我们的前端项目运行命令。
安装Node.js的过程中会自动为我们安装NPM包管理工具，NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list
在前端项目中NPM最直观的作用便是提供第三方库的下载方式，这里使用的基本命令如下
以下的命令非常重要至少需要理解NPM安装依赖的基本方式
#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
#默认参数：--save 简写 -S 将当前依赖保存在dependencies节点下
npm install jquery
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
npm i -D eslint（上述命令的简写方式）
#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
npm install -g webpack（上述命令的简写方式）
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
npm install #根据package.json中的配置下载依赖，初始化项目
#其他命令
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
模块化编程的基本概念
随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块，而模块化一般来说遵循两个基本的规范：CommonJS模块化规范（基于ES6语法之前）和ES6模块化规范（使用ES6语法），目前使用较多的是后者，我们可以通过以下这个简单的例子来理解ES6模块化编程。
- 创建 modularization_pro文件夹
- 导出模块：创建 src/teacherApi.js 文件
export default {
getList() {
console.log('获取讲师列表')
},
save() {
console.log('保存讲师')
}
}
- 导入模块：创建 src/teacherComponent.js文件
Import teacher from"./teacherApi.js"
teacher.getList()
teacher.save()
- 运行程序：node teacherComponent.js
在上述案例中ES6使用export和import来导出导入模块，但是最后通过node来运行的时候，此时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
因此需要**使用Babel转码：**ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行，而Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持，而Babel转码需要依赖于babel-cli的第三方库，因此可以通过NPM来管理。
- Babel提供babel-cli工具，用于命令行转码，我们使用
npm install -g babel-cli来安装它，可以在命令行中输入babel --version来检查是否安装成功 - 在modularization目录下使用
npm init -y命令初始化项目使得本项目能够用NPM来管理 - 配置.babelrc文件：Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则
{
"presets": ["es2015"],
"plugins": []
}
- 安装转码器：在modularization目录中通过
npm install -D babel-preset-es2015命令安装指定转码规则的转码器 - 通过
babel src -d dist来将整个目录的内容进行转码，这里是将ES6规范的src目录内容以ES5规范转到dist目录下，这样就能正常运行了 - 运行程序
node dist/teacherComponent.js
ES6导入和导出模块不仅仅只有上述写法，还可以像下述代码一样使用：
## src/teacherApi.js
export function getList() {
console.log('获取讲师列表2')
}
export function save() {
console.log('保存讲师2')
}
## src/teacherComponent.js：
import {getList, save} from"./teacherApi.js"
getList()
save()
通过模块化编程的代码理解，我们后续就能明白为什么Vue脚手架中会那样设计代码了，都是通过模块的导入和导出来完成整个系统的架构的。
Webpack基本概念
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 例如JS、CSS、LESS 转换成一个静态文件，减少了页面的请求，只需要请求一个文件即可，Webpack的基本使用依赖于webpack-cli库 ，下面通过一个简单的案例来理解Webpack在前端项目中的一个使用情况和能做到的事情。
- 在全局范围内通过NPM的
npm install -g webpack webpack-cli命令完成webpack和webpack-cli的安装，在安装完成后也可以通过webpack -v来查看版本号验证是否安装成功 - 创建 webpack_pro文件夹
- 进入目录通过
npm init -y来初始化文件夹，使用NPM来进行包管理 - 创建src文件夹，由于这里侧重于演示webpack因此直接使用ES5规范，避免转码的复杂操作。
## 在src下创建common.js
exports.info=function (str) {
document.write(str)
}
## 在src下创建utils.js
exports.add=function (a, b) {
returna+b
}
## 在src下创建main.js
const common=require('./common')
const utils=require('./utils')
common.info('Hello world!'+utils.add(100, 200))
- 创建webpack的配置文件：webpack_pro目录下创建配置文件webpack.config.js
以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包同时将打包后的文件放入当前目录的dist文件夹下最终打包后的js文件名为bundle.js
const path=require("path") //Node.js内置模块
module.exports= {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js'//输出文件
}
}
- 通过
webpack --mode=development来执行编译命令，这里执行完毕后可以查看bundle.js文件发现确实包含了common.js和utils.js的内容，对于所有和webpack有关的内容我们都可以在package.json文件中配置scripts来简化命令的执行
"scripts": {
//...,
"dev": "webpack --mode=development",
"prod": "webpack --mode=production"
}
配置了上述文件后即可通过运行npm命令来执行打包
- 开发环境下的打包：
npm run dev - 生产环境下的打包：
npm run prod
- 创建入口页面：webpack_pro目录下创建index.html，通过
<script src="dist/bundle.js"></script>引用bundle.js后在浏览器中打开HTML即可显示main.js的输出结果。
除了对JS文件进行打包之外，Webpack还能够实现对CSS进行打包，但是Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 Loader 进行转换。Loader 可以理解为是模块和资源的转换器。首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
npm install -D style-loader css-loader
此后只需要修改webpack.config.js并在其中引入CSS的Loader即可
constpath=require("path"); //Node.js内置模块
module.exports= {
//...,
output:{
//其他配置
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
引入Loader后可以创建一个CSS文件并在main.js中通过require引入后使用npm run dev后查看HTML页面在浏览器中的样式即可验证是否成功
如果说NPM是前端项目依赖的管理工具那么Webpack就是将各种依赖打包成一个统一的JS静态文件，在此基础上就可以将模块化编程和Vue以及各种零散的概念统一整合，最终在理解Vue脚手架的基础上会更有优势。
浅析Vue-Cli2的基本原理和项目架构
我们首先需要使用NPM来安装初始化项目必要的依赖vue-cli，如果之前存在vue3的cli需要通过vue uninstall -g @vue/cli来卸载已有的依赖，否则可以直接通过npm install -g vue-cli来安装脚手架。此后即可打开命令行通过vue init webpack 项目名来创建一个基本的项目了，在命令行中会要求我们输入项目名称、项目于描述（默认）、作者（默认）、项目构建类型（默认）、是否创建Vue路由（是）、是否使用ESLint语法检测（否）、是否初始化单元测试（否）、是否初始化e2e测试（否）、选择包管理工具（一般使用NPM），这样就成功初始化了一个名称为项目名的Vue-Cli项目了，下面简单介绍一下该项目的目录结构。
build：用来使用webpack打包的build依赖，存放了webpack的配置文件
config：用来做整个项目配置目录，如全局常量等等
node_modules：用来管理项目中使用依赖
src：用来书写vue的源代码
assets：用来存放静态资源
components：用来书写Vue组件
router：用来配置项目中路由
App.vue：项目中根组件
main.js：项目中主入口
static：其他静态
.babelrc：将es6语法转为es5运行
.editorconfig：项目编辑配置
.gitignore：git版本控制忽略文件
.postcssrc.js：源码相关js
index.html：项目主页
package.json：类似于pom.xml文件 依赖管理 不建议手动修改
package-lock.json：对package.json加锁
README.md：项目说明文件
前文也有提到前端项目需要打包后然后将打包产生的JS文件引入到HTML文件中才能够实现最终的效果，因此需要使用Webpack命令，而NPM初始化后的项目所提供的package.json文件中我们可以将webpack命令封装成Scripts脚本来执行，因此可以通过npm run dev来启动项目
dev脚本完整命令是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
下面对其中各个参数作解释：
- webpack-dev-server：一个小型的基于Node.js的http服务器，可以运行前端项目
- –inline：一种启动模式
- –progress：显示启动进度
- –config build/webpack.dev.conf.js：指定webpack配置文件所在位置
接下来分析一下此处引用的webpack配置文件：我们可以发现在总的配置文件中引入了一个基础的webpack配置文件即base.conf
在base.conf中定义了项目的入口文件即上述在Webpack中介绍的，Vue的脚手架将会把项目的入口文件即main.js的文件内的所有内容打包成一个静态文件并生成到[name].js文件中，需要注意的是默认的name是app
最终通过HtmlWebpack的插件将上述生成的app.js自动注入到index.html文件中，这样就完成了将组件化的App.vue打包成app.js并在html页面中展示的全过程。
总结一下App.vue、main.js、index.html之间的关系：对于任意格式的页面不论是Vue还是其他最终我们都需要通过index.html即HTML格式来展示，通过上述dev脚本中的webpack-dev-server命令我们可以将HTML页面部署到服务器中通过在浏览器中输入URL来访问页面。而HTML页面的内容来源于main.js，由于main.js中引用了许多其他的组件因此如果将main.js直接注入到index.html中那么将会引发多次请求，因此webpack通过配置文件的入口和输入将main.js中所有的内容打包成一个app.js从而能够只通过一次请求就能访问到main.js的所有内容，而在main.js中引入了App.vue的组件，因此最终效果就是将App.vue的内容展示到了HTML页面中显示了出来，这便是整体的简单逻辑。
下面解释一下main.js是如何做到将App.vue的内容显示在HTML中的：
在main.js中我们引入了App.vue组件并注册到了Vue对象中，当main.js被打包成app.js自动注入到index.html页面中的时候，此时该Vue对象就挂载到了id为app的div标签上，同时通过template来将被挂载的节点即该div的所有内容替换成App组件的内容，这样就完成了将App.vue的内容显示在HTML中的整个过程。
那么App.vue中的内容又是如何显示的呢？
通过分析其内容我们可以发现其最终的显示效果依赖于标签，该标签起到的就是路由跳转的功能也就是解析当前的网页URL并进行路由分配，该功能的实现要从上述的main.js中讲起，我们发现在main.js中为#app组件注册了router路由，因此在该Vue对象所处的节点内所有的路由跳转都依赖于router变量，我们去到/router/index.js文件中可以发现http://localhost:8080即默认路由（path:“/”）对应的组件是HelloWorld组件，因此最终页面显示的就是HelloWorld组件的内容。
至此，从编写组件到注册路由再到main.js中实例化Vue对象最终在HTML页面中显示出来的整体流程就相对而言较为清晰了，当我们想要增加页面的时候只需要在components文件夹下编写合适的Vue组件后加入到路由中并在其他组件的合适位置设置路由跳转按钮或者超链接，即可轻松完成简单页面的布局，也便能够使用Vue Cli2来开发项目了，比起Vue-Cli3最明显的区别就是自动化生成了路由的配置，相对而言较为简便。
2691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
