【Vue知识点- No2.】vue脚手架、基础API_api和脚手架的区别-CSDN博客

本文链接：https://blog.csdn.net/qq_48687155/article/details/125958422

No2.vue脚手架、基础API

必安装-vue-devtools

搜索vue-devtools回车-然后添加至Chrome等待下载后自动安装-右上角显示已经添加即代表成功

vscode-插件补充

vue文件代码高亮插件-vscode中安装
在这里插入图片描述
代码提示插件-vscode中安装

知识点自测

想学会今天的内容, 先测测这几个会不会

表达式, 变量是什么
new的作用和含义
实例化对象
什么是对象上的, 属性和方法
对象的赋值和取值
this的指向
npm/yarn是什么, package.json干什么的, 下载包的命令是什么, 什么是模块化开发
函数的形参实参, 得马上反应过来, 哪个是变量哪个是值, 谁传给谁了

如果通不过, 请记住口诀:

变量是一个容器, 表达式原地都有返回结果

var a = 10;
console.log(a); // a就是变量, 运行后使用变量里的值再原地打印
console.log(10 + 50); // 10 + 50 就是表达式
console.log(a > 9); // 这叫判断表达式, 原地结果是true

new 类名() - 原地得到一个实例对象 - 对象身上有key(或叫属性, 叫键都行), 对应的值是我们要使用的
实例化对象就是new 类名() 创造出来的对象, 身上包含属性(key, 键) 对应的值

什么是属性和方法(固定格式)

let obj = {
      // 属性指的是a, b, c, d, e这些名字
    a: 10,
    b: [1, 2, 3],
    c: function(){
     },
    d () {
     },
    e: () => {
     } // 值是冒号:右边的值
}
// 这个格式是固定的, 必须张口就来, 张手就写, 准确率100%

对象的复制和取值(固定格式)

有=(赋值运算符) 就是赋值, 没有就是取值

let obj = {
     
    a: 10,
    b: 20
}
console.log(obj.a); // 从obj对象的a上取值, 原地打印10
obj.b = 100; // 有=, 固定把右侧的值赋予给左侧的键, 再打印obj这个对象, b的值是100了

this指向口诀

在function函数中, this默认指向当前函数的调用者调用者.函数名()

在箭头函数中, this指向外层"函数"作用域this的值

今日学习目标

能够理解vue的概念和作用
能够理解vuecli脚手架工程化开发
能够使用vue指令

1. Vue基本概念

1.0_为何学Vue

目标: 更少的时间,干更多的活. 开发网站速度, 快

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NdDSeRCl-1658640833455)(images/image-20210317180201113.png)]

例如: 把数组数据-循环铺设到li中, 看看分别如何做的?

原生js做法

<ul id="myUl"></ul>
<script>
    let arr = ["春天", "夏天", "秋天", "冬天"];
    let myUl = document.getElementById("myUl");
    for (let i = 0; i < arr.length; i++) {
        let theLi = document.createElement("li");
        theLi.innerHTML = arr[i];
        myUl.appendChild(theLi);
    }
</script>

Vue.js做法

<li v-for="item in arr">{
  {item}}</li>
<script>
    new Vue({
        // ...
        data: {
            arr: ["春天", "夏天", "秋天", "冬天"] 
        }
    })
</script>

注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js

开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)

现在很多项目都是用vue开发的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ABOaOpU1-1658640833456)(images/image-20210317180240323.png)]

市场上90%工作都要求会vue, 会vue拿高薪, 甚至java或测试都要学点vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HUq3LOrC-1658640833456)(images/image-20210317180255055.png)]

1.1_Vue是什么

logo镇楼

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-41JQrbkx-1658640833457)(images/VUE-logo.png)]

渐进式javacript框架, 一套拥有自己规则的语法

官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)

什么是渐进式

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dmeli4xV-1658640833457)(images/image-20210314200521109.png)]

Vue渐进式: Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个vue回过头来看, 会很有帮助

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f9F1es9j-1658640833458)(images/渐进式-1613206784433.png)]

什么是库和框架

补充概念:

库: 封装的属性或方法 (例jquery.js)

框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xOANYJNa-1658640833458)(images/image-20210111215624065.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gU2aj0T0-1658640833459)(images/image-20210212141558460.png)]

1.2_Vue学习的方式

传统开发模式：基于html/css/js文件开发vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ncJjczDJ-1658640833459)(images/image-20210228083641377.png)]
工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qcf4uNSB-1658640833460)(images/image-20210228083746746.png)]

Vue如何学

每天的知识点自测最好做到了如指掌 - 做不到只能花30分钟去记住结论和公式
记住vue指令作用, 基础语法 - 弄一个字典(一一映射关系)
在课上例子, 练习, 案例, 作业, 项目中, 反复磨炼使用
学会查找问题的方式和解决方式(弄个报错总结.md, 避免反复进坑)

总结: vue是渐进式框架, 有自己的规则, 我们要记住语法, 特点和作用, 反复磨炼使用, 多总结

2. @vue/cli脚手架

2.0_@vue/cli 脚手架介绍

目标: webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目

@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujAH8jMo-1658640833460)(images/1586936282638.png)]

@vue/cli的好处

开箱即用

0配置webpack

babel支持

css, less支持

开发服务器支持

2.1_@vue/cli安装

目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程

全局安装命令

yarn global add @vue/cli
# OR
npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c

停止重新来
换一个网继续重来

查看vue脚手架版本

vue -V

总结: 如果出现版本号就安装成功, 否则失败

2.2_@vue/cli 创建项目启动服务

目标: 使用vue命令, 创建脚手架项目

注意: 项目名不能带大写字母, 中文和特殊符号

创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

选择模板

可以上下箭头选择, 弄错了ctrl+c重来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7UjtZ07C-1658640833461)(images/image-20210116230221236.png)]

选择用什么方式下载脚手架项目需要的依赖包[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9r2GVy0j-1658640833462)(images/Snipaste_2021-03-26_15-24-14.png)]

回车等待生成项目文件夹+文件+下载必须的第三方包们

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5Gxi1Um-1658640833462)(images/image-20210212174314768.png)]

进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demo

npm run serve
# 或
yarn serve

只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6TrbLv4-1658640833462)(images/image-20210116231815543.png)]

打开浏览器输入上述地址

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JybFvHTJ-1658640833463)(images/image-20210116233035582.png)]

总结: vue命令创建工程目录, 项目内置webpack本地热更新服务器, 帮我们打包项目预览项目

2.3 @vue/cli 目录和代码分析

目标: 讲解重点文件夹, 文件的作用, 以及文件里代码的意思

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

2.4_@vue/cli 项目架构了解

目标: 知道项目入口, 以及代码执行顺序和引入关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k34MTFkz-1658640833463)(images/image-20210317201811310.png)]

2.5_@vue/cli 自定义配置

目标：项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js

src并列处新建vue.config.js

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

2.6_eslint了解

目标: 知道eslint的