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

梦里梦外; 2023-02-09 11:48 51阅读 0赞

## vue-cli-介绍 ##

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]  
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/zloirock
    
    Also, 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.  打开命令行窗口，执行命令：

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

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

![在这里插入图片描述][20200518171828554.png]

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

![在这里插入图片描述][20200518171845214.png]  
4. 创建成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 1]

1.  启动项目（在项目根目录下执行 npm run serve）
    
    记得进入项目目录 `cd vuecli-demo`

npm run serve

1.  启动成功

![在这里插入图片描述][20200518171924158.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 2]

### 说明 ###

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

## 项目目录 ##

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

### 目录结构 ###

项目目录结构：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 3]

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

前端工作目录：

![在这里插入图片描述][20200518172047601.png]

入口文件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属性作用：限制样式在当前组件下生效。

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 4]

## vscode-插件vetur ##

它能更好的编辑.vue文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 5]

## eslint ##

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

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

### 错误示例 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 6]

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

### 解决错误 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 7]

## 命令行 ##

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

npm run serve

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 8]

## babel ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 9]

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

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

## 解决错误 ##

*  看懂 出错解释’a’ is assigned a value but never used 。直接改过来就行。  
    ![\- \[外链图片转存中...(img-muJo4itg-1589793464304)\]][- _..._img-muJo4itg-1589793464304]

## 命令行 ##

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

npm run serve

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

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

![\[外链图片转存中...(img-uBdUU7rD-1589793464305)\]][..._img-uBdUU7rD-1589793464305]

## babel ##

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

![\[外链图片转存中...(img-5dRMwam1-1589793464306)\]][..._img-5dRMwam1-1589793464306]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518171804394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[20200518171828554.png]: https://img-blog.csdnimg.cn/20200518171828554.png
[20200518171845214.png]: https://img-blog.csdnimg.cn/20200518171845214.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200518171904353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[20200518171924158.png]: https://img-blog.csdnimg.cn/20200518171924158.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200518171955236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200518172035291.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[20200518172047601.png]: https://img-blog.csdnimg.cn/20200518172047601.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200518172121750.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200518172140725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200518172153194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200518172204580.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200518172216371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200518172227622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[- _..._img-muJo4itg-1589793464304]: https://img-blog.csdnimg.cn/20200518172815280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[..._img-uBdUU7rD-1589793464305]: https://img-blog.csdnimg.cn/2020051817282786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[..._img-5dRMwam1-1589793464306]: https://img-blog.csdnimg.cn/20200518172836299.png