Vuejs第四篇（Vue CLI详解）

最新推荐文章于 2023-09-06 11:46:00 发布

CharmDeer

最新推荐文章于 2023-09-06 11:46:00 发布

阅读量625

点赞数

分类专栏： Vuejs学习文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_57249797/article/details/120622894

版权

Vuejs学习专栏收录该内容

21 篇文章 9 订阅

订阅专栏

目录（点击下面知识点可跳转）

一、vuecli脚手架的介绍和安装（理解）
二、vuecli-CLI2初始化项目过程（掌握）
三、vuecli-CLI2的目录结构解析（掌握）
四、知识回顾（了解）
五、安装CLI错误和ESLint规范（掌握）
六、runtime-compiler和runtime-only的区别（理解）
七、VueCLI3创建项目和目录结构（掌握）
八、VueCLI3配置文件的查看和修改（掌握）
九、箭头函数的使用和this指向（掌握）

知识概览：

在这里插入图片描述

一、vuecli脚手架的介绍和安装（理解）

返回目录

自我感想：
看完，跟着做完Vuejs第三篇webpack配置（点击详情）的小伙伴很不错了，对此我的感想就是其简直跟后端Spring一样的配置地狱，但是后端有SpringBoot的脚手架来帮助我们简化配置，大大提升了开发效率（详解欢迎订阅我的SpringBoot专栏），那么前端有没有类似的脚手架呢？现在它来了！！！（React也有脚手架，Angular我没有发现…）
跟着我往下学习吧！

什么是Vue CLI？

如果你只是简单写几个Vue的Demo程序，那么你不需要Vue CLI
如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI
- 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
- 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情

CLI是什么意思呢？

CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架
Vue CIL是一个官方发布vue.js项目脚手架
使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

Vue CLI使用前提 - Node（因为webpack是依赖node，而CLI要生成webpack配置）

安装NodeJs

可以直接在官方网站中下载安装
网址：http://nodejs.cn/download/
不会的请参考Vuejs第三篇(帮你定位知识点：点击详情）

检测安装的版本

默认情况下自动安装Node和NPM
Node环境要求8.9以上或者更高版本

什么是NPM呢？
NPM的全称是Node Package Manager
是一个NodeJS包管理和分发工具，已经成为了非官方的Node模块（包）的标准
后续我们会经常使用NPM来安装一些开发过程中依赖包

cnpm安装
由于国内直接使用npm的官方镜像是非常慢的，这里推荐使用淘宝NPM镜像
你可以使用淘宝定制的cnpm(gzip压缩支持)命令行工具代替默认的npm:

npm install -g cnpm -registry=http://registry.npm.taobao.org

在这里插入图片描述
这样就可以使用cnpm命令来安装模块了：

cnpm install [name]

然后准备工作：安装webpack
全局安装：（不指定版本了，默认最新，之前指定版本坑死了，-g是全局的意思）

npm install webpack -g

局部安装：（–save-dev是声明测试版，需要进入项目目录进行安装，如果你不会，不安装也可以，反正脚手架会帮我们生成）

npm install webpack --save-dev

Vue CLI的使用

安装Vue脚手架（脚手架3版本）

npm install -g @vue/cli

在这里插入图片描述
Vue CLI官网介绍：https://cli.vuejs.org/zh/guide/

注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目是不可以的

需要拉取2.x模板
Vue CLI3和旧版使用了相同的vue命令，所以Vue CLI2（vue-cli）被覆盖了，如果你仍然需要使用旧版本的vue init功能，你可以全局安装一个桥接工具

npm install -g @vue/cli-init

在这里插入图片描述
脚手架2与3可以同时使用了
再介绍一下下面这个指令：

Vue CLI2初始化项目：

vue init webpack 【my-project】

先学习脚手架2再学习脚手架3

二、vuecli-CLI2初始化项目过程（掌握）

返回目录

Vue CLI2初始化项目：

vue init webpack 【my-project】

注意点：1.my-project为项目名称，2.项目名称不能存在中文
初始化例子：

vue init webpack vuecli2test

在这里插入图片描述
选项分析：
请添加图片描述
继续初始化：

回车

完成：

看不懂没关系，接下来肯定是分析目录结构了

三、vuecli-CLI2的目录结构解析（掌握）

返回目录

分析开始：
在这里插入图片描述
分析package.json文件：

扩展知识点：利用node我们可以直接执行js文件而不需要浏览器编译
测试一下：

以前我们想要运行js代码必须引入到html文件中如何通过浏览器打开编译
现在我们利用node直接编译运行：
在这里插入图片描述
强大！！！
继续分析：

src就很熟悉了，它是我们做开发时的文件夹，components包里就是我们开发的组件

static文件夹放置我们的静态资源：里面如果放置的是图片，会原封不动的打包到dist文件夹中
在这里插入图片描述
根据Vuejs第三篇学习加上现在的分析总结如下：
请添加图片描述

四、知识回顾（了解）

返回目录

缺乏什么知识的可以去Vuejs第三篇去补习一下，不学也没多大关系

1.组件化开发

1.1、父子组件的访问

$ children/$refs
$ parent/$root

1.2、slot的使用

基本使用
具名插槽
编译的作用域
作用域插槽

2.前端模块化

2.1、为什么要使用模块化

简单写js代码带来的问题
闭包引起代码不可复用
自己实现了简单的模块化
AMD/CMD/CommonJS

2.2、ES6中模块化的使用

export
import

3.webpack
3.1、什么是webpack

webpack和gulp对比
webpack依赖环境
安装webpack

3.2、webpack的起步

webpack命令
webpack配置：webpack.config.js/package.json(scripts)

3.3、webpack的loader

css-loader/style-loader
less-loader/less
url-loader/file-loader
babel-loader

3.4、webpack中配置vue

vue-loader

3.5、webpack的plugin

3.6、搭建本地服务器

webpack-dev-server

3.7、配置文件的分离

4.Vue CLI
4.1、什么是CLI

脚手架是什么东西
CLI依赖webpack,node,npm
安装CLI3 --> 拉取CLI2模块

4.2、CLI2初始化项目的过程

4.3、CLI2生产的目录结构的解析

五、安装CLI错误和ESLint规范（掌握）

返回目录

重新创建一个CLI项目：
在这里插入图片描述
再创建一个CLI项目作为对比学习：

在这里插入图片描述
简单改一下名：

首先展示ESLint对代码规范的检测
把项目用本地服务器跑起来

这种代码规范需要很长时间来适应

如果我们不想使用，可以手动关闭：
在这里插入图片描述
重新编译我们的项目：无错

六、runtime-compiler和runtime-only的区别（理解）

返回目录
Vue的运行过程：
template–》ast–》render–》virtual dom–》UI（真实dom）

请添加图片描述
在来对比我们两个项目下的main.js文件：
在这里插入图片描述
对比：
结论1、runtime-only性能更高
结论2、runtime-only代码量更少

所以我们都选用runtime-only（第二项）

然后分析一下h
在这里插入图片描述
h本质是createElement，它可以替换掉我们index.html里的div那一行

运行测试：

继续扩展：createElement是JavaScript原生方法

刷新浏览器：

上面只是是createElement的普通用法

我们也可以传入组件对象：
在这里插入图片描述
浏览器显示：

所以h是createElement的别名
为什么可以跳过前面的template–》ast–》步骤？
打印一下App对象：可以发现以下内容

在这里插入图片描述
由此可以知道.vue文件的template是由vue-template-compiler解析渲染的（帮你们定位到：(好好理解)Vuejs第三篇的知识点）

所以我们可以放心大胆的使用runtime-only选项

知识加深：

解析npm run build命令执行过程：
请添加图片描述
解析npm run dev命令执行过程：

请添加图片描述
修改配置:webpack.base.config.js起别名（后续分析）

七、VueCLI3创建项目和目录结构（掌握）

返回目录

认识Vue CLI3

vue-cli 3 与 2版本有很大区别

vue cli 3 是基于webpack 4 打造，vue-cli 2 还是 webpack 3
vue cli 3 的设计原则是 “0配置” ，移除的配置文件根目录下的，build和config等目录
vue cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增加了public文件夹，并且index.html移动到public中

创建Vue CLI3的项目

vue create 【项目名称】

我们输入命令：

vue create testvuecli3

目前2021-10-8日最新版是Vue CLI v4.5.13
在这里插入图片描述
跟3版本差不多用法

继续初始化：

在这里插入图片描述
选择与取消都是空格

在这里插入图片描述
继续
选择配置文件存放位置

继续
Save this as a preset for future projects的意思是你需不需要把你之前的配置保存并用于未来创建的选项，我们选个y，我个人建议在学习阶段还是不要选y，如果选了y然后保存配置名称即可，我选N，然后继续选择Use NPM
请添加图片描述
回车完成
在这里插入图片描述
重点：我们的本地服务器测试命令已经改变了

由原来的npm run dev变成了npm run serve
执行命令：

点击运行测试：

新版本main.js有点小变化：

八、VueCLI3配置文件的查看和修改（掌握）

返回目录

配置去哪里了？

UI方面的配置

启动配置服务器：vue ui

在这里插入图片描述
进入：

继续：

进入：

公共路径和输出目录都很少修改

在这里插入图片描述
以上这些配置没有特殊要求基本上不用修改
配置隐藏位置：

修改配置的更多方法以后再详解

九、箭头函数的使用和this指向（掌握）

返回目录

箭头函数的基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>

<script>
    // 箭头函数:也是一种定义函数的方式
    // 1.定义函数的方式
    const a=function () {

    }
    // 2.对象字面量中定义函数
    const obj={
      b:function () {
        
      },
      c:{
        
      }
    }
    // 3.ES6中的箭头函数
    /*
    const d=(参数列表)=>{
      
    }
    */
    
    const d = ()=>{
      
    }
</script>

</body>
</html>

箭头函数参数和返回值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <script>
        // 1.参数问题:
        // 1.1 放入两个参数
        const sum=(num1,num2)=>{
          return num1+num2;
        }
        // 1.2 放入一个参数
        const power = num =>{//一个参数不需要小括号
          return num*num;
        }
        // 2.函数代码中
        // 2.1、函数代码块中有多行代码
        const test= ()=>{
          // 打印Hello World
          console.log('Hello world');

          // 打印hello Vue.js
          console.log('hello Vue.js');
        }
        // 2.2、函数代码块中只有一行代码
        /*const mul =(num1,num2)=>{
          return num1+num2;
        }*/
        //特殊写法:
        const mul = (num1,num2) => num1 + num2//省略return
        const demo = () => console.log("Hello Demo")

		const mmm = a => a(a)//解析:
        const mmmm= function (a) {//展开式
            return a(a);
        }
    </script>
</body>
</html>

箭头函数中this的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<script>
  //什么时候使用箭头函数(把一个函数作为另一个函数的参数时)
  /*setTimeout(function () {
    console.log(this)//window
  },1000)*/
 /* setTimeout(()=>{
    console.log(this)//window
  },1000)*/


  // 问题:箭头函数中的this是如何查找的？
  // 答案:向外层作用域中,一层层查找this,直到有this的定义
  // 结论:箭头函数中的this引用的就是最近作用域中的this
   /* const obj={
      aaa(){
        setTimeout(function () {
          console.log(this)//window
        })
        setTimeout(()=>{
          console.log(this)//打印的是obj对象
        })
      }
    }
    obj.aaa()*/

  const obj={
    aaa(){
      setTimeout(function () {
        setTimeout(function(){
          console.log(this)//window
        })

        setTimeout(()=>{
          console.log(this)//window
        })
      })
      setTimeout(()=>{
        setTimeout(function () {
          console.log(this)//window
        })

        setTimeout(()=>{
          console.log(this)//obj对象
        })
      })
      setTimeout(()=>{
        setTimeout(()=>{
          console.log(this)//obj对象
        })
      })

    }
  }
  obj.aaa()
</script>
</body>
</html>

CharmDeer

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vuejs第四篇（Vue CLI详解）

一、vuecli脚手架的介绍和安装（理解）二、vuecli-CLI2初始化项目过程（掌握）三、vuecli-CLI2的目录结构解析（掌握）四、知识回顾（了解）五、安装CLI错误和ESLint规范（掌握）六、runtime-compiler和runtime-only的区别（理解）七、VueCLI3创建项目和目录结构（掌握）八、VueCLI3配置文件的查看和修改（掌握）九、箭头函数的使用和this指向（掌握）十、什么是路由和其中映射关系（理解）十一、前端渲染后端渲染和前端路由后端路由（理解）
复制链接

扫一扫