• 尚硅谷Vue视频学习打卡-Vue组件化编程以及Vue脚手架的安装-简要介绍

    Vue2.0 + Vue3.0 ⭐️

    2. Vue 组件化编程

    2.1 为什么组件化编程

    由于传统方式编写应用，会存在一些问题

    1. 依赖关系混乱，不好维护
    2. 代码复用率不高

    组件的定义就是：

    • 实现应用中局部功能代码和资源的集合

    2.2 模块与组件、模块化与组件化

    2.2.1 模块
    1. 理解：向外提供特定功能的js程序，一般就是一个js文件
    2. 为什么：js文件很多很复杂，所以需要模块管理
    3. 作用：复用js，简化js的编写，提高js的运行效率
    2.2.2 组件
    1. 理解：用来实现局部（特定）功能效果的代码集合（html、css、image、audio）
    2. 为什么：一个界面的功能很复杂
    3. 作用：复用编码，简化项目编码、提高运行效率
    2.2.3 模块化

    当应用中的js都以模块来编写，那么这个应用就是一个模块化应用

    2.2.4 组件化

    当应用中的功能都是多组件的方式来编写的，那么这个应用就是一个组件化应用

    2.3 非单文件组件

    理解：一个文件包括n个组件 该文件为html文件

    注意：

    1. 组件中一定不要写el配置项、因为最终所有的组件都要被一个vm所管理，由vm决定el对象
    2. data必须写为函数，避免组件被复用时，数据存在引用关系
    3. 进行注册的过程中注意全局注册和局部注册

    备注：需要使用template配置组件结构（html）

    第一步：创建组件

    <script type="text/javascript">
    const school = Vue.extend({
        template:`
        
    
        	
    模板样式
    
    	
    
            `    ,
        data(){
            return {
                key: 'value',
                key: 'value'
            }
        }
    })
    const student = Vue.extend({
        template:`
        
    
        	
    模板样式
    
    	
    
            `    ,
        data(){
            return {
                key: 'value',
                key: 'value'
            }
        }
    })
    script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    第二步：注册组件

    <script type="text/javascript">
    new Vue({
        el:'#root',
        components:{ // (局部注册)
            school,
            student
        }
    })
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    第三步：编写组件标签

    <body>
    <div>
        <student>student>
        <school>school>
    div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    开启全局注册

    <script type="text/javascript">
	Vue.component('student', student);
script>

    • 1
    • 2
    • 3
    2.3. 1 VueComponent
    1. 组件本质其实是一个名为VueComponent的构造函数，且不是由程序员来定义的，是由Vue.extend生成的
    2. 当我们写出组件名作为标签时，Vue解析会自动帮我们创建该组件名的对象实例并且执行new VueComponent(options)
    3. 每次调用Vue.extend 返回的都是一个新的 VueComponent 学过后端的应该很清楚
    4. 在组件中的this所指向的是 VueComponent 类似于java的动态绑定
    2.3.2 内置关系

    prototype 显示原型属性

    __proto__ 隐式原型属性

    他们都为原型对象的一个属性

    内置关系：VueComponent.prototype.\__pro__ === Vue.prototype
    在这里插入图片描述

    2.4 单文件组件

    理解：一个文件只包括一个组件 该文件为 vue文件

    由于VScode不认识Vue文件，所以推荐一些插件

    在这里插入图片描述
    注意：vue文件中仅仅有三个高亮模板：template、style、script

    vue中的script 需要使用默认暴露（export default），以便于进行 import

    3. Vue脚手架安装

    Node.js安装（Vue脚手架安装的可选择前置条件）

    如果出现：npm WARN config global --global, --local are deprecated. Use --location=global instead.
    在这里插入图片描述
    这种提示只要将这两个文件中的"prefix -g"修改为"prefix --location=global",保存
    在这里插入图片描述
    如果还有就将剩下的两个npx文件中的prefix -g也进行修改

    如果npm命令无反应

    在这里插入图片描述
    则需要将C:/user下的.npmrc文件 删除即可 因为每个人的用户名不同，所以可以直接在C盘下搜索npmrc即可

    使用npm config list 即可检验是否成功

    自此开始安装Vue脚手架

    1. 先进行淘宝镜像的设置 npm config set registry https://registry.npm.taobao.org
    2. 然后检测设置是否成功 npm config get registry
    3. 如果成功则继续进行安装 npm install -g @vue/cli
    4. 中间可能会有许许多多奇奇怪怪的错误，自行百度搜索一个一个解决即可！（太多太杂说不完）
    5. 安装成功没有 ERR 输入vue -V 正确输出版本号即为安装成功~
    6. 接下来就是进行创建脚手架项目 vue create test
    7. 选择你的vue版本
    8. 等待创建成功！

    在这里插入图片描述
    cd 到该目录 输入命令 npm run serve 成功编译后会在本地默认地址localhost:8080下出现一个Vue为你准备的HelloWorld！

    在这里插入图片描述
    至此结束！

  • 相关阅读:
    【系统架构设计】架构核心知识： 1 系统工程与信息系统基础
    【面试题-007】说一下JVM原理
    Linux知识复习第2期
    WebRTC系列-SDP之生成sdp文本
    触发器，寄存器，三态输出电路
    DRF 用户认证
    PS笔记2_钢笔工具的形状和路径
    maven下载使用及环境变量配置步骤【非常详细】
    stack和queue的模拟实现
    Vue小技巧
  • 原文地址：https://blog.csdn.net/cczj0/article/details/126089412