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 [email protected]: 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

> [email protected] 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/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @vue/[email protected]
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. 打开命令行窗口，执行命令：

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

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

3. 等待安装项目依赖的包

4. 创建成功

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

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

npm run serve

6. 启动成功

7. 去浏览器访问 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 = 314

export { 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'
  ]
}