使用Vue脚手架【Vue】

news2025/10/31 3:05:26

3. 使用 Vue 脚手架

3.1 初始化脚手架

3.1.1 说明

  1. Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
  2. 最新的版本是4.x
  3. 文档：https://cli.vuejs.org/zh/

3.1.2 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

然后在你创建项目的目录中就能看到你创建的项目。
如果出现 ” 'vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件。“则：

  1. 输入命令npm config list找到npm 的配置路径
    在这里插入图片描述

  2. 查看此路径下有没有vue.cmd
    在这里插入图片描述

  3. 如果有vue.cmd，将当前路径复制添加到path环境变量
    步骤：桌面右击“我的电脑”-属性-高级系统设置-环境变量
    ①直接新建-规范取一个变量名-将vue.cmd所在路径复制到变量值
    然后在path中添加此变量名，注意用%号包裹住
    在这里插入图片描述
    在这里插入图片描述

②第二种就是直接复制vue.cmd所在的路径，然后不用点击新建，找到path点击编辑，在里面新建将路径放进去即可
4. 环境变量配置保存好之后，打开cmd,输入vue -V查看版本，输入vue查看详细
在这里插入图片描述
在这里插入图片描述

第三步：启动项目

npm run serve

备注：

  1. 如出现下载缓慢请配置 npm 淘宝镜像：
npm config set registry 
https://registry.npm.taobao.org
  1. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，
    请执行：vue inspect > output.js

3.1.3 模板项目的结构

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

3.1.4 _render函数

用vscode打开刚刚创建好的项目：main.js中有一个render函数
在这里插入图片描述
关于不同版本的vue：

  1. vue.js与vue.runtime.xxx.js的区别：
    （1）vue.js是完整版的Vue,包含：核心功能+模板解析器。
    （2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器。
  2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

3.1.5 _ref属性

  1. 被用来给元素或子组件注册引用信息（id的替代名）
  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  3. 使用方式：
    打标识：< h1 ref="xxx" >......< /h1 > 或 <School ref = "xxx" >< /School >
    获取：this.$refs.xxx
<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDom">点我输出上方的DOM元素</button>
    <School ref="sch"></School>
  </div>
</template>

<script>
    //引入School组件
    import School from './compoents/School.vue'

    export default {
        name: 'App',
        components: {
            School
        },
        data(){
            return {
                msg: '欢迎学习Vue！'
            }
        },
        methods: {
            showDom(){
                console.log(this.$refs.title);//真实DOM元素
                console.log(this.$refs.btn);//真实DOM元素
                console.log(this.$refs.sch);//School组件的实例对象（vc）
            }
        }
    }
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el: '#app',
    render: h => h(App)
})

School.vue

<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
    export default {
        name: 'School',
        data(){
            return {
                name: '西安文理',
                address: '西安'
            }
        }
    }
</script>

<style>
    .school {
        background-color: gray;
    }
</style>

在这里插入图片描述

3.1.6 _props属性

功能：让组件接收外部传过来的数据
（1）传递数据：

< Demo name = "xxx"/ >

（2）接收数据：

  • 第一种方式（只接收）：props：['name']
  • 第二种方式（限制类型）：props：{name: String}
  • 第三种方式（限制类型、限制必要性、指定默认值）：
props: {
	name: {
		type:String,//类型
		required:true,//必要性
		dafault:'老王'//默认值
	}
}

备注： props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

App.vue

<template>
  <div>
    <Student name="李四" sex="女" :age="19"></Student>
  </div>
</template>

<script>
    import Student from './compoents/Student.vue'
    export default {
        name: 'App',
        components: {Student}
    }
</script>

Student.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生名称：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ myAge+1 }}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
    export default {
        name: 'Student',
        data(){
            return {
                msg: '我是一个三好学生',
                myAge: this.age,
            }
        },
        methods: {
            updateAge(){
                this.myAge++
            }
        },
        props: ['name', 'sex', 'age'] //简单声明接收

        //接收的同时对数据进行类型限制
        /* props: {
            name: String,
            age: Number,
            sex: String,
        } */

        //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
        /* props: {
            name: {
                type: String, //name的类型是字符串
                required: true //name是必要的
            },
            age: {
                type: Number,
                default: 99, //默认值
            },
            sex: {
                type: String,
                required: true
            }
        } */
    }
</script>

3.1.7 _mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：

  • 第一步定义混合，例如：
{
	data(){....}
	methods: {....}
	.....
}
  • 第二步使用混入，例如：
    （1）全局使用：Vue.mixin(xxx)
    （2）局部混入：mixins: ['xxx']

School.vue

<template>
    <div>
      <h2 @click="showName">学校名称:{{ name }}</h2>
      <h2>学校地址:{{ address }}</h2>
    </div>
  </template>
  
  <script>
    //引入一个混合
    // import {mixin, mixin2} from '../mixin'
      export default {
          name: 'School',
          data(){
              return {
                  name: '西安文理',
                  address: '西安',
              }
          },
        //   mixins: [mixin, mixin2]
      }
  </script>

Student.vue

<template>
  <div>
    <h2 @click="showName">学生名称：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
  </div>
</template>

<script>
    //引入一个混合
    // import {mixin, mixin2} from '../mixin'

    export default {
        name: 'Student',
        data(){
            return {
                name: '张三',
                sex: '男',
            }
        },
        // mixins: [mixin, mixin2]
    }
</script>

mixin.js

export const mixin = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log('你好啊！');
    },
}

export const mixin2 = {
    data() {
        return {
            x: 100,
            y: 200
        }
    },
}

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {mixin, mixin2} from './mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false
Vue.mixin(mixin)
Vue.mixin(mixin2)

//创建vm
new Vue({
    el: '#app',
    render: h => h(App)
})

3.1.8 插件

  1. Vue 插件是一个包含 install 方法的对象
  2. 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

3.1.9 scoped样式

作用：让样式在局部生效，防止冲突。
写法：< style scoped >

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/436397.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Foresight对话：刘韧对谈王建硕、曾映龙、Joy Xue

Foresight对话：刘韧对谈王建硕、曾映龙、Joy Xue

Foresight 2023论坛现场 自2022年11月上线以来&#xff0c;OpenAI研发的ChatGPT一度风靡全球。面对这波AI浪潮&#xff0c;有些人拥抱了新趋势&#xff0c;有些人则担心会被取代&#xff0c;另一些人发掘其中的创业机遇和价值。创业是大浪淘沙的过程&#xff0c;目前以ChatGPT为…
阅读更多...
Spring Boot概述（二）

Spring Boot概述（二）

1.SpringBoot整合Junit 1.搭建SpringBoot工程 2.引入starter-test起步依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope> </dependency>…
阅读更多...
第二章IDEA快速上传项目到码云

第二章IDEA快速上传项目到码云

文章目录 下载Git并配置邮箱上传到Github配置Git配置Github账号创建要上传码云的项目 上传到Gitee下载插件配置我们的Gitee账号 我们的IDEA功能很强大&#xff0c;所以肯定集成了快速上传项目到码云的功能 实际的开发中&#xff0c;代码都是采用IDE进行开发&#xff0c;所以我们…
阅读更多...
day31—选择题

day31—选择题

文章目录 1.在单处理器系统中&#xff0c;如果同时存在有12个进程&#xff0c;则处于就绪队列中的进程数量最多为&#xff08;D&#xff09;2.以下关于多线程的叙述中错误的是&#xff08;C&#xff09;3. 整数0x12345678&#xff0c;在采用bigendian中内存的排序序列是&#x…
阅读更多...
AutoGPT是什么？超简单安装使用教程

AutoGPT是什么？超简单安装使用教程

1.AutoGPT 最近几天当红炸子鸡的是AutoGPT&#xff0c;不得不说AI发展真快啊&#xff0c;几天出来一个新东西&#xff0c;都跟不上时代的脚步了。 AutoGPT是一个开源的应用程序&#xff0c;展示了GPT-4语言模型的能力。这个程序由GPT-4驱动&#xff0c;自主地开发和管理业务。…
阅读更多...
WIN10-22H2专业版_电脑维修人员专用装机系统镜像【03.27更新】

WIN10-22H2专业版_电脑维修人员专用装机系统镜像【03.27更新】

WIN10-22H2专业版是由站长亲自封装的电脑维修人员专用装机系统镜像&#xff0c;系统干净无广告&#xff0c;稳定长效不卡顿&#xff0c;适合电脑维修店用来维修电脑重装系统。此版本是WIN10系统里非常稳定的正式版本之一&#xff0c;适合在维修电脑时重装系统或者大批量装机使用…
阅读更多...
OpenCV图像处理之傅里叶变换

OpenCV图像处理之傅里叶变换

文章目录 OpenCV图像处理之傅里叶变换图像处理之傅里叶变换流程图OpenCv图像处理之傅里叶变换OpenCv傅里叶变换之低通滤波OpenCv傅里叶变换之高通滤波 OpenCV图像处理之傅里叶变换 傅里叶变换&#xff1a;目的就是得到图像的低频和高频&#xff0c;然后针对低频和高频进行不同…
阅读更多...
yolov5训练自己的目标检测模型

yolov5训练自己的目标检测模型

yolov5训练自己的目标检测模型 1.克隆项目并配置环境 1.1克隆项目 进入GitHub下载yolov5源码 点此进入 选择分支v5.0&#xff0c;并下载源码 anaconda激活相应环境 activate pytorch进入项目存放的地址 E: cd yolov5-master1.2 yolov5项目结构 ├── data&#xff1a;主…
阅读更多...
信号生成和可视化——周期性/非周期性波形

信号生成和可视化——周期性/非周期性波形

信号生成和可视化 此示例说明如何使用 Signal Processing Toolbox™ 中提供的函数生成广泛使用的周期和非周期性波形、扫频正弦波和脉冲序列。尝试此示例Copy Command Copy Code 周期性波形 除了 MATLAB 中的 sin 和 cos 函数外&#xff0c;Signal Processing Toolbox™ 还…
阅读更多...
客快物流大数据项目（一百一十五）：熔断器 Spring Cloud Hystrix

客快物流大数据项目（一百一十五）：熔断器 Spring Cloud Hystrix

文章目录 熔断器 Spring Cloud Hystrix 一、​​​​​​​Hystrix 简介 二、什么是雪崩效应
阅读更多...
如何使用 Linux find 命令查找文件？

如何使用 Linux find 命令查找文件？

在Linux系统中&#xff0c;find命令是一个非常强大的工具&#xff0c;可以帮助用户查找文件或目录。这篇教程将向您展示如何使用Linux find命令来查找您需要的文件。 基本语法 在使用Linux find命令之前&#xff0c;您需要了解其基本语法。Linux find命令的基本语法如下&…
阅读更多...
初识Java：数据类型与变量、运算符

初识Java：数据类型与变量、运算符

哈喽大家好&#xff0c;这篇文章我将为大家分享关于Java的数据类型与变量和运算符。 文章目录 数据类型与变量数据类型整型类型byte类型short类型int类型long类型 浮点型字符类型布尔类型 变量浮点型变量布尔型变量类型转换隐式转化显式转化 运算符算术运算符增量运算符自增/自…
阅读更多...
CSDN 周赛 47 期

CSDN 周赛 47 期

CSDN 周赛 47 期 判断题单选题12 填空题编程题1、题目名称&#xff1a;最小差值&#xff08;30分&#xff09;2、题目名称&#xff1a;风险投资&#xff08;45分&#xff09; 小结 判断题 中国古代就发现并证明了勾股定理&#xff0c;并在《周髀算经》中出现了“勾三股四弦五”…
阅读更多...
Linux 这4个进程相关的命令，太好用！

Linux 这4个进程相关的命令，太好用！

当您在Linux系统中管理进程时&#xff0c;了解一些进程监控命令是非常重要的。这些命令可以帮助您了解当前正在运行的进程以及它们的状态&#xff0c;从而更好地管理系统资源。下面是一些常用的Linux进程监控命令及其示例&#xff1a; 1、ps命令 ps命令可以列出当前正在运行的…
阅读更多...
验证码登录开发----手机验证码登录

验证码登录开发----手机验证码登录

手机验证码登录 需求分析 为了方便用户登录&#xff0c;移动端通常都会提供通过手机验证码登录的功能 手机验证码登录的优点&#xff1a; 方便快捷、无需注册&#xff0c;直接登录使用短信验证码作为登录凭证&#xff0c;无需记忆密码安全 登录流程&#xff1a; 输入手机…
阅读更多...
06-文章搜索页面

06-文章搜索页面

文章搜索页面 6-1&#xff1a;开篇 再上一章中&#xff0c;我们完成了 热搜首页 的开发&#xff0c;虽然经历了 ”千辛万苦“ &#xff0c;但是对大家来说&#xff0c;应该也是收获满满。 那么在这一章节&#xff0c;我们将会进入新的篇章&#xff0c;来到 文章搜索 页面的开…
阅读更多...
【C++】深度剖析string类的底层结构及其模拟实现

【C++】深度剖析string类的底层结构及其模拟实现

文章目录 前言1. string的结构2. 构造、析构2.1 无参构造2.2 带参构造2.3 问题发现及修改c_stroperator []析构 2.4 合二为一 ——全缺省 3. 拷贝构造3.1 浅拷贝的默认拷贝构造3.2 深拷贝拷贝构造的实现 4. 赋值重载4.1 浅拷贝的默认赋值重载4.2 深拷贝赋值重载的实现 5. strin…
阅读更多...
ES6 中的类（class）

ES6 中的类（class）

前言 ES6 引入的 class 关键字具有定义类的能力。类是 ECMAScript 中新的基础性语法糖。虽然 ES6 表面上看起来可以支持正式的面向对象编程&#xff0c;但实际上它背后使用的依旧是原型和构造函数的概念。&#xff08;笔记内容参考《JavaScript 高级程序设计&#xff08;第 4 …
阅读更多...
TTL反相器、OC门、TS门、推挽输出、开漏输出

TTL反相器、OC门、TS门、推挽输出、开漏输出

TTL反相器 这是一个TTL反相器&#xff0c;这是经过了很多工程师多种设计最终沉淀出来的电路&#xff0c;这个电路是比较成熟的。我们只需要对这个电路进行解析即可&#xff0c;不需要再去研究当初是如何设计出来的。 学过CMOS应该知道&#xff0c;右侧的输出级其实也是个推挽输…
阅读更多...
为什么程序实际可用内存会远超物理内存？

为什么程序实际可用内存会远超物理内存？

背景介绍 不知道在你刚接触计算机的时候&#xff0c;有没有这么一个疑问&#xff1a;“为什么我的机器上只有两个G 的物理内存&#xff0c;但我却可以使用比这大得多的内存&#xff0c;比如 256T&#xff1f;”反正我当时还是挺疑惑的&#xff0c;不过现在我可以来告诉你这个答…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023