终于是时候学习真正的技术啦！^_^

vue-cli

CLI（Command Line Interface），命令行接口——没法顾名思义，而且还有点问题，可以略过。

npm下载安装

打开cmd窗口，或者VS Code终端（快捷键Ctrl+`），运行：

npm install -g @vue/cli

就可以下载vue cli相关文件/包到本地。

注意这个 -g，表示全局（global），即：把下载的包存放到一个特定位置，这样这些包就可供全局（所有其他项目）使用。

查看安装位置：

npm root -g

演示：查看安装的内容

创建项目

创建一个空文件夹，运行

vue create yz-demo

就会创建一个名为yz-demo的vue项目。检查其内容，包括：

• node_modules文件夹：存放通过npm远程下载，或者从global中拷贝过来的（module形式的）包，说明：
  
  • vue：核心，略
  • babel：用于将js代码转换成ES5标准，确保浏览器正常运行
    
  • webpack：用于打包
• public文件夹：存放有图标和一个index.html
  
• src文件夹，存放我们的源（source）代码，包括：
  assets：静态文件资源，比如图片
  components文件夹：组件
  App.vue：入口组件
  
• babel配置文件
• package配置文件
  

项目运行

在当前项目目录下，输入命令：

npm run serve

就会通过webpack：

• 启动一个服务器：基于 webpack-dev-server
• 编译vue项目

演示：

运行 http://localhost:8080/

查看页面源代码中两个js文件：

1. /js/app.js

2. /js/chunk-vendors.js

以及：<%= BASE_URL %>、<%= htmlWebpackPlugin.options.title %>等被“转化”

vue-cli-service

npm run 实际上是使用的是 vue-cli-service 命令。

演示：

• 控制台输出中包含：vue-cli-service serve
• package.json中的scripts

    "scripts": {
      "serve": "vue-cli-service serve",

运转流程

通过console.log()演示

项目各组件间的运行顺序，依次为：

1. main.js
2. App.vue
3. components/HelloWorld.vue

注意：import优先执行，所以控制台的输出是“倒过来”的。

以及首页的构成。

Mock.js引入

为了让大家对vue cli结构有一个更深刻的认识，我们来引入mock.js并使其生效。

演示：

• npm install mockjs：node_module文件夹中添加了mockjs
• git比对：package.json和package-lock.json中都增加了mock.js部分内容
  

然后，就可以在main.js中导入mockjs：

import Mock from 'mockjs'

接着，使用Mock.mock()方法模拟/Login响应：

Mock.mock("/Login", {
    success: true
})

发起一个ajax请求，检查Mock是否生效。

但是，在实际开发中，我们通常不会在main.js中添加任何js代码，所以更常见的做法是：

1. 在src（或其文件夹，比如/src/mock）下中新建一个js文件（比如mocks.js）
2. 在其中import Mock并执行Mock.mock()方法
3. 在main.js中再

   import './mock.js'    //注意不要加 <变量名> from

作业

1. 搭建一个vue cli项目，导入mock.js并模拟一个响应
2. 导入axios，利用axios对mock响应发起一个情况
   

注意中划线（-）的个数：

• -：后面一般跟简写，比如g
• --：后面一般跟全名，比如depth

ES2015模块及

历史渊源：Commonjs（require/define）、AMD、CMD、ES6 modules（import/export）

webpack

#基本概念

入口(entry)

出口(output)：bundle.js生成的目录位置等

loader：非js文件处理，其中的rules：

• test：不是测试，而是匹配
• use：如果匹配，就使用

插件(plugins)

require：

• // 通过 npm 安
• // 用于访问内置插件

模式：production/development

#指南

安装：不推荐全局安装（怕有版本冲突），但“安装”究竟干了些什么？

使用：

• npx webpack => 创建bundle.js
• 仅可识别 import/export
  
• webpack.config.js => 可以指定 #基本概念 中的元素
  

另外：

CLI=

emit：生成（bundle）

npm init -y：write a package.json for you

package.json：定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境

package-lock.json：锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致

lodash：一个数组处理模块

npx：（如果找不到就先临时安装再）运行某模块

require('path')：引入node.js的一个模块

require.context：每一次require()都会生成一个context，也可以自己定义一个context

TypeScript

在编译期去掉类型和特有语法，生成纯粹的JavaScript代码

安装：npm install -g typescript

检查：tsc -v

撤了撤了，vue-cli引入TypeScript之后无法编译，报错：

源栈学历

在当前系列 Vue.js 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：