Vue — 第六天（vue-cli-介绍）

vue-cli-介绍

vue-cli是官方提供的开发vue项目的脚手架工具。

脚手架是为了保证各施工过程顺利进行而搭设的工作平台。

在开发过程中，脚手架工具是有用的，开发完成（项目上线），它就没有用了。

vue-cli可以提供基于vue项目架子的快速创建，成为了一套标准。

项目目录结构，统一的项目结构。
提供了开发过程中的系列工具，
- 例如：babel 语法降级的
- 例如：eslint 约束语法风格（代码风格）
- 例如：less 预处理器
- …
提供一个开发时服务器，预览代码（预览项目）
- 提供：自动刷新浏览器，方便你预览
- 提供：热更新功能，有些资源的修改，不需要刷新浏览器，立即更新，进行预览
- …

总结：

vue-cli是一个提供开发项目过程中，便利的一个平台。更加方便的开发项目，提高你的开发效率。
基于nodejs的命令行工具。

vue-cli-安装

以npm包的格式存在的（不是一个可执行文件），所以要以npm包的方式来安装。

安装：

任意找一个cmd窗口，通过全局安装 @vue/cli

# npm安装
npm i @vue/cli -g# 下面是一个可能的安装之后的显示结果
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
C:\Users\fanyoufu\AppData\Roaming\npm\vue -> C:\Users\fanyoufu\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js> core-js@3.6.5 postinstall C:\Users\fanyoufu\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ @vue/cli@4.3.1
added 10 packages from 49 contributors, removed 12 packages and updated 100 packages in 115.609s

成功：安装日志中没有任何关于 error err 相关的日志，代表成功。
关于安装报错的问题：
- 90%是网络问题，你多试试。
- 如果安装慢，使用淘宝镜像。
```
npm i @vue/cli -g --registry=https://registry.npm.taobao.org
# 或者是使用nrm
```

  ```bash# mac 苹果电脑sudo npm i @vue/cli -g

测试：

在任何一个目录下，运行命令行：

vue --version

如果能够输出版本号，就说明已经成功安装了脚手架工具了。

例如：

@vue/cli 4.3.1

vue-cli-创建项目

目标

用 vue-cli工具来创建vue项目。
掌握vue项目结构目录。

步骤

在某个目录下（你需要创建项目的地方）打开命令行窗口，有三种方法：

shift + 鼠标右键

选择：win7 在此处打开命令行窗口 win8|10 在此处打开powershell窗口

或者：

在文件夹地址栏，输入cmd

或者：

在vscode打开终端（有时会出错）

打开命令行窗口，执行命令：

# 1. 必须英文  2. 不能和包名（不要与当前文件夹重名，不要取名为vue,express...包名）重名
vue create 项目名称

选择创建方式，默认创建，自定义创建。选择默认创建

等待安装项目依赖的包

4. 创建成功

启动项目（在项目根目录下执行 npm run serve）

记得进入项目目录 cd vuecli-demo

npm run serve

启动成功

去浏览器访问 http://localhost:8080

说明

它会自动打开浏览器，并时时监听代码：如果代码有改动，它会自动刷新。

项目目录

vue create XXX 创建项目时，它会自动创建一套目录结构。

目录结构

项目目录结构：

典型SPA。
项目会自带git管理
node_modules + pakage.json 是一个 npm项目。

在开发时，我们需要把自己的代码写在src目录下。

前端工作目录：

入口文件main.js是所有工作的基础。

入口文件

解释main.js的代码：

// 项目的入口文件
// 'vue' 是在这个项目中通过npm安装的包
// 脚手架工具自动给你安装的包,在如下两个地方可以看到：
//   - package.json
//   - node_modules// 相当在.html文件中<script src="./vue.js">
import Vue from 'vue' // App.vue是一个单文件组件
// 导入一个组件
import App from './App.vue'
// alert('123456')
// console.log(Date.now())
// 约定当前对vue代码的提示方式
// production:生产环境
// productionTip = false 不采用生产环境下的提示。尽可能给更多的提示信息。
Vue.config.productionTip = false// Vue实例有一个函数$mount, 它可以把vue实例挂载到某个dom窗口容器中
// new Vue().$mount('#app')  <====> new Vue({el:'#app"})// render也是Vue实例的一个配置项
// render作用：指定视图的内容，它的值是一个函数。
//           在这里，它的内容就是上面引入的组件App// 整体的作用是：把App.vue这个组件的内容，渲染到 index.html中的
// <div id="app"></div> 中， 再显示出来。new Vue({render: h => h(App),// render: function(h) { return h(App) },
}).$mount('#app')// #app 是指public下index.html中的14行中的<div id="app">

内容：

导入VUE模块
导入根组件
开启开发时提示
创建根实例，然后在根实例上使用组件。
- render函数是解析App.vue根组件
- $mount函数将解析的APP.vue组件的内容替换index.html中的#app容器。

职责：

负责依赖项目需要的资源
根实例的创建

ES6模块化

什么是模块化

目标：让一个.js文件(A.js)中可以引用另一个.js文件(B.js)中的代码

模块: 就是一个文件。

模块化的规范：

commonjs 规范。nodejs中是commonjs规范。
es6规范。ECMAScript规范。

在nodejs中，模块化规范：CommonJS

导出：module.exports = '导出的内容' exports.xxx = '导出的内容'
导入：const path = require('path')

nodejs中的模块化与es6中的模块化是不同的。

ES6模块化

ES6也提供了模块化规范：ES6模块

默认导入与导出
- 导出：export default 导出内容
- 导入：import 变量名 from 'js模块路径'
按需导入与导出
- 导出：
  - export const 成员变量名1 = '导出内容1'
  - export const 成员变量名2 = '导出内容2'
- 导入：import {成员变量名1} from 'js模块路径'

基本步骤

定义模块

创建一个.js文件，其中，写一些变量，函数…

// 创建一个模块// 如何把es6module/a.js中的fn这个函数给main.js中去使用？const a = 100
function fn(x,y) {return x + y
}

导出模块

// 创建一个模块// 如何把es6module/a.js中的fn这个函数给main.js中去使用？// const a = 100
function fn(x,y) {return x + y
}// 导出模块中的fn
export { fn }

导入模块

main.js

import { fn } from './es6module/a.js'
console.log(fn(100,200)) // 300

默认导入与导出

module-a.js

// 模块a  默认导出
// 可以导出任何格式的内容：字符串  数字  函数  对象  数组 ...
export default {name: '模块A',attr: '属性'
}

main.js

import obj from './module-a'
console.log(obj) // {name: "模块A", attr: "属性"}

按需导入与导出

module-b.js

// 模块B  按需导出
export function fn(x,y) {return x + y
}export function fn1(x,y,z) {return x + y +z
}
export const a = 314

另一种写法：

function fn(x,y) {return x + y
}function fn1(x,y,z) {return x + y +z
}
const a = 314export { fn, fn1,a}

main.js

// 按需导入
import {a,b} from './module-b'
console.log(a,b)

整体导入

// 按需导入（全部成员导入）
import * as all from './module-b'
console.log(all) // 收集了所有成员的变量（对象）

默认导出和按需导出共存

module-c.js

// 混合导入
//  同时有默认导出和 按需导出const fn = function(x,y) {return x + y
}const a = 100
const fn1 = function(x,y,z) {return x + y+z
}// 按需导出
export {a, fn1
}
// 默认导出
export default {fn
}

main.js

// 有混合导入
import obj, {fn1} from './es6module/c.js'console.log(obj,fn1)

导入导出重命名

注意：ES6的模块化，浏览器暂时不支持。

单文件组件

用一个.vue为后缀的文件来声明一个组件。

以前定义组件

// 全局注册组件
Vue.component('com-a',{// 组件配置对象template: '<div>组件结构</div>'
})new Vue({// 局部注册组件components: {'com-b': {// 组件配置对象template: '<div>组件结构</div>'}}
})

无论是何种注册方式，每个组件必须有一个组件配置化对象。

现在定义组件

在vue-cli中

以 .vue 文件的方式来定义组件，文件的内容代表的是：组件配置对象，称为：单文件组件。
共有三个部分
- template（可选）：约定这个组件的视图
- script（必须）: 设置除了template之外的组件配置项，并默认导出
- style（可选）: 用来组件中元素的样式
需要渲染这个组件
- 使用这个配置对象进行全局注册或者 局部注册，再来使用。
- 使用路由规则中的 component 选项指定路由配置对象。

.vue文件的格式：

// 相对于组件配置对象中 template 选项，声明组件结构。
<template><div class="red">必须有一个root（根）标签 {{msg}}</div>
</template>
// 如果有其他的配置选项，需要默认导出一个对象，在对象中声明其他配置选项
<script>
export default {// 其他组件配置对象data () {return {msg: '单文件组件数据'}}
}
</script>
// 当前组件需要样式
<style>.red{color: red;}
</style>

用这种方式定义组件，结构逻辑样式分工明确，非常清晰，便于维护。

style中scoped属性作用：限制样式在当前组件下生效。

如何在码云上观察代码的变化

慢慢训练自己去码云查看代码的变化！

vscode-插件vetur

它能更好的编辑.vue文件

eslint

是独立于vue的代码检查工具。

作用：对代码的编码格式进行检查，能帮助程序员减少代码出错的风险。例如：如果你定义了一个变量又没有在随后的代码中使用它，则eslint就会报错。

错误示例

这个错误是定义了变量，后面没有使用。

解决错误

看懂出错解释’a’ is assigned a value but never used 。直接改过来就行。

命令行

启动项目要运行如下命令：

npm run serve

这是由于vuecli在package.json中预置了三条scripts。

通过npm run XXXX 就可以运行scripts中指定义的命令。

babel

Babel 是一个 JavaScript 编译器。它能把es6 的语法 --------> es5的语法以兼容低版本的浏览器。

vue-cli自动集成了babel,在项目的根目录下，babel.config.js文件，其中约定了如何去做es6到es5的降级处理。

module.exports = {presets: ['@vue/cli-plugin-babel/preset']
}

解决错误

看懂出错解释’a’ is assigned a value but never used 。直接改过来就行。

命令行

启动项目要运行如下命令：

npm run serve

这是由于vuecli在package.json中预置了三条scripts。

通过npm run XXXX 就可以运行scripts中指定义的命令。

babel

Babel 是一个 JavaScript 编译器。它能把es6 的语法 --------> es5的语法以兼容低版本的浏览器。

vue-cli自动集成了babel,在项目的根目录下，babel.config.js文件，其中约定了如何去做es6到es5的降级处理。

module.exports = {presets: ['@vue/cli-plugin-babel/preset']
}