FrontEnd笔记 -- Vue 脚手架

最新推荐文章于 2021-12-07 21:01:02 发布
最新推荐文章于 2021-12-07 21:01:02 发布
阅读量319 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42480750/article/details/121530502
版权

文章目录

四、脚手架

4.1 初始化

  • 骨架
# 配置镜像
npm config set registry https://registry.npm.taobao.org

# 安装
npm install -g @vue/cli

# 创建项目
vue create vue_test

# 运行项目
cd vue_test
npm run serve

# 访问项目
http://localhost:8080/
  • 脚手架文件结构

main.js -> App.vue -> School.vue + Student.vue -> 渲染完毕后装载到 index.html

在这里插入图片描述

public 文件夹：一般放置一些静态资源（图片），需要注意，放在这里的静态资源 webpack 进行打包的时候，会原封不动 打包到 dist 文件夹 中；

assets 文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在 assets 文件夹里面的静态资源再 webpack 打包的时候，会把这些静态资源当作一个模块，打包到 JS 文件 里面。

在这里插入图片描述

<!-- App.vue -->

<template>
	<div>
		<img src="./assets/logo.png" alt="logo">
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

<!-- index.html -->

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签的图标，其中 <%= BASE_URL %> 部署时会被替换成public目录路径 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题，其中 <%= htmlWebpackPlugin.options.title %> 部署时会被替换成package.json中的name -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在这里插入图片描述

4.2 render 函数

/* 
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

/* 
	关于不同版本的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函数去指定具体内容。
*/

//创建Vue实例对象---vm
new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中
	render: h => h(App)
})

4.3 ref 属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
    1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
    2. 获取：this.$refs.xxx

<!-- App.vue -->

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button @click="showDOM">点我输出上方的 DOM 元素</button>
        <School ref="sch" />
    </div>
</template>

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

    export default {
        name: 'App',
        data() {
            return {
                msg: '欢迎学习 Vue！'
            }
        },
        methods: {
            showDOM() {
                // App 对应的 VueComponent 实例对象
                console.log(this)
                // App 中的 ref 为 title 的 DOM 元素
                console.log(this.$refs.title)
                // App 中的 ref 为 sch 的 VueComponent 实例对象
                console.log(this.$refs.sch)
            }
        },
        components: {School}
    }
</script>

在这里插入图片描述

4.4 props 配置

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

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

  • 代码实验
<!-- App.vue -->

<template>
    <div>
        <!-- age 传的值默认就是字符串，:age 将引号内表达式运算后执行的结果作为值传递 -->
        <Student name="李四" sex="女" :age="19" />
    </div>
</template>

<script>
    import Student from './components/Student'

    export default {
        name: 'App',
        components: {Student}
    }
</script>

<!-- Student.vue -->

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

<script>
    export default {
        name: 'Student',
        data() {
            return {
                msg: '我是一个尚硅谷的学生',
                myAge: this.age
            }
        },
        // props: ['name', 'sex', 'age'] // 简单接收

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

        props: {
            name: {
                type: String,
                required: true // 该属性是必穿的
            },
            age: {
                type: Number,
                default: 99
            },
            sex: {
                type: String,
                required: true
            }
        },
        methods: {
            updateAge() {
                this.myAge++
            }
        }
    }
</script>

4.5 mixin 混入

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

  • 实例

点击姓名弹出展示框展示姓名。

//mixin.js

export const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    }
}

<!-- Student.vue -->

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

<script>
    import {mixin} from '../mixin'

    export default {
        name: 'Student',
        data() {
            return {
                name: '李四',
                sex: '女'
            }
        },
        mixins: [mixin]
    }
</script>

<!-- School.vue -->

<template>
  <div>
      <h2 @click="showName">学校姓名：{{name}}</h2>
      <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
    import {mixin} from '../mixin'

    export default {
        name: 'School',
        data() {
            return {
                name: '尚硅谷',
                address: '北京.昌平'
            }
        },
        mixins: [mixin]
    }
</script>

4.6 plugins 插件

功能：用于增强Vue。

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

在这里插入图片描述

  • plugins.js 定义插件
// 定义插件，一定要有 install 方法
export default {
    install(Vue) {
        //全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

        //定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

        //定义混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            }
        })
        
        //给Vue原型上添加一个方法
        Vue.prototype.hello = ()=>{alert('你好啊')}
    }
}
  • main.js 引入并使用插件
import Vue from 'vue'
import App from './App.vue'

// 引入插件
import plugins from './plugins'

Vue.config.productionTip = false

// 使用插件
Vue.use(plugins)

new Vue ({
    el: '#app',
    render: h => h(App)
})
  • School.vue Student.vue 验证插件
<template>
  <div>
      <!-- 1. 过滤器：取字符串的前四个字符 -->
      <h2>学校姓名：{{name | mySlice}}</h2>
      <h2>学校地址：{{address}}</h2>
      <button @click="testHelloOnVue">点我测试一下 hello 方法</button>
  </div>
</template>

<script>
    export default {
        name: 'School',
        data() {
            return {
                name: '尚硅谷atguigu',
                address: '北京.昌平'
            }
        },
        methods: {
            testHelloOnVue() {
                // 4. 直接调用原型上的 hello 方法
                this.hello()
            }
        },
    }
</script>

<template>
  <div>
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
      <!-- 2. 自动获取焦点 -->
      <input type="text" v-fbind:value="name">
  </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {
                name: '李四',
                sex: '女'
            }
        }
    }
</script>

4.7 scoped 样式生效范围

作用：让样式在局部生效，防止冲突。

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

<script>
    export default {
        name: 'School',
        data() {
            return {
                name: '尚硅谷atguigu',
                address: '北京.昌平'
            }
        }
    }
</script>

<style scoped>
    .demo {
        background-color: aqua;
    }
</style>

<template>
  <div class="demo">
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {
                name: '李四',
                sex: '女'
            }
        }
    }
</script>

<style scoped>
    .demo {
        background-color: burlywood;
    }
</style>
L小Ray想有腮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大前端学习笔记 -- NuxtJS项目案例--RealWorld（Nuxt脚手架创建项目、Git Actions自动发布和PM2部署）
爱玲姐姐的博客
09-29 2740
NuxtJS项目案例–RealWorld（创建Nuxt项目、Git Actions自动发布和部署） 一、案例项目realworld介绍 1. 案例项目介绍 案例名称：RealWorld 这是一个开源的学习项目，目的就是帮助开发者快速学习新技能。 GitHub仓库：https://github.com/gothinkster/realworld 在线实例：https://demo.realworld.io/ 2. 案例相关资源 页面模板：https://github.com/gothinkster/real
vue笔记
兔子零
11-12 479
vue day01 vue 简介 简单易用, 上手快 热度最高 对比jQuery的区别 以前使用jQuery结合模板引擎(art-template), 每一次进行页面渲染都需要将整个节点渲染, 而如果使用vue进行渲染, 只会将改变的内容渲染一次, 大大提高了用户体验!!! jQuery只是一个JavaScript库, 对项目的侵入性较小, 开发过程中可以很轻易的切换成其他库或框架来继...
vue-frontend-quickstart:Vue网站的入门模板-无节点
03-16
Vue前端快速入门 Vue网站的入门模板-无节点 预览 在线演示 使用这个专案 如何设定： 使用上方的模板按钮将此项目添加到您的仓库中（无需派生）。 转到您的仓库的“设置”并启用GitHub Pages 。 几秒钟后，打开部署在MyUsername.github.io/preact-frontend-quickstart的站点。 如果要在本地运行Web应用程序，只需在回购根目录中启动静态服务器。 请参阅本推荐的服务器选项。 什么是Vue？ Vue是“渐进前端框架”。 它可以与您的网站进行交互。 既可以作为现有站点上的组件，也可以将整个站点设计为单页应用程序。 比jQuery更具可读性和更强大。 Vue是声明性的，因此您不必担心诸如查找元素和更改其值之类的低级操作。 Vue与React类似，但是包括我在内的许多人都认为Vue更易于学习和使用。 请参阅我的页面，以了解有关V
vue第二部分 vue组件化编程
WYT11的博客
08-21 140
vue非单文件组件 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
frontend-template:为前端应用开发提供配置起点的基本模板
07-05
前端模板 为前端应用开发提供配置起点的基本模板。 包含 npm、bower 和 grunt 的配置。 设置步骤 安装节点包 npm install 安装 Bower 包 bower install 更新包名，并设置初始目录结构 grunt install:{package name}
23、路由
weixin_45998542的博客
12-07 101
23、路由 1.路由概念 vue 的一个插件库，专门用来实现 SPA 应用 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 路由分类 后端路由： 理解：value 是 function, 用于处理客户端提交的请求。 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数 来处理请求, 返回响应数据。 前端路由： 理解：value 是 component，用于展示页面内容。 工作过程：当浏览器的路径改变时, 对
【Vue】template 模板用法
热门推荐
qq_45677671的博客
03-30 5万+
文章目录一、在HTML5中二、在JavaScript中三、在Vue中写在vue构造器里写在template标签里写在script标签里（官方推荐） 一、在HTML5中 template标签：其内容隐藏在客户端之外 该内容在加载页面是不会呈现，不会渲染出任何信息 相当于自带属性：template {display: none;} <body> <template> <!-- 该标签内容是不可见的 --> 内容模板元素 </
FrontEnd笔记 -- React
L小Ray想有腮
12-29 721
React 框架的初次学习笔记。参考的课程为《尚硅谷React全家桶2021》，B站课程的链接是：https://www.bilibili.com/video/BV184411x7F9?p=122。
jenkins 自动化构建 vue脚手架项目
qq_42962779的博客
03-30 488
Jenkins 自动构建 vue 前端项目： 平时部署前端项目每次都需要前端人员build打包，然后给后端，后端丢到服务器上，但是这个确实很麻烦，有时候一天得发好多次，很是麻烦，而且出错概率高，所以今天来弄下自动部署 前端项目 jenkins git node ，npm 必须要装（jenkisn安装可以看我之前发的jenkins安装笔记，node 和 npm 安装相对简单，就不做介绍了） 具体思路：jenkins 从git 上检出 前端代码到jenkins 的工作目录，（/var/lib/jenki
crm-frontend-vue:crm-frontend-vue
04-18
本项目名为"crm-frontend-vue:crm-frontend-vue"，是一个基于Vue.js框架构建的客户关系管理（CRM）系统的前端部分。Vue.js是目前非常流行的前端JavaScript框架，以其轻量级、易上手、高性能和组件化的特性受到开发者...
example-frontend-vue-js
03-06
设置通过使用git克隆此存储库来获取代码> git clone https://github.com/sanity-io/example-frontend-vue-js.git...或为zip存档。 下载完成后，在项目目录中打开终端，然后继续： npm install编译和热重装以进行开发...
dushanbe-frontend-vue-pwa
03-27
"杜尚别前端vue-pwa"是一个基于Vue.js框架的渐进式Web应用程序（PWA）项目。Vue.js是目前非常流行的轻量级JavaScript框架，它以其易学性、灵活性和高性能著称。PWA是一种旨在提供接近原生应用体验的Web应用，通过...
video-game-frontend-Vue
04-01
入门应用-带Tailwind的Vue.js项目信息该项目使用为Vue.js入门应用构建的标准Tailwind CSS。 演示包括直接来自Tailwind CSS示例的nav组件。 标准Vue.js入门应用程序看起来像这样。项目设置npm install编译和热重装以...
工作总结-1
人生代码 ---- 公众号
05-29 3327
JavaScript 使用 mediaDevices API 选择摄像头
Vue 模板编译原理
frontend_frank的博客
12-31 1157
关于vue的内部原理其实有很多个重要的部分，变化侦测，模板编译，virtualDOM，整体运行流程等。之前写过一篇《深入浅出 - vue变化侦测原理》讲了关于变化侦测的实现原理。那今天...
去去去去去去去去去前期前期前期
08-12
去去去去去去去去去前期前期前期前期前期前期
计组P1 单周期MIPS处理器
最新发布
08-12
实验报告+项目 Verilog语言
Spring Boot原创歌曲分享平台.zip
08-12
该平台严格按照需求分析制作相关模块，并利用所学知识尽力完成，但是本人由于学识浅薄，无法真正做到让该程序可以投入市场使用，仅仅简单实现部分功能，希望日后还能改善。 本平台具有以下优点： 该平台具有较高的适用性，选用B/S结构，可以在绝大部分个人平台上使用该平台。 平台将用户权限进行划分，管理员和用户都能看到及操作的信息不一样，两者具备不同的操作权限。 该平台操作界面简单明了，大部分人都可以正常使用。 但也存在以下问题需要改进： 运行时窗口不能被刷新，可以改进。 平台过于简单，显示的信息有限。 不能添加多个管理员账号，如果可以则将利于发展原创歌曲分享规模，便于原创歌曲分享信息集中管理。 不能实时预约接待消息，容易被忽视，不利于管理员服务用户。
使用 frontend-maven-lugin 打包 vue 成 jar 给 springboot 项目引用
07-16
要将Vue应用打包成jar，并在Spring Boot项目中引用，您可以使用frontend-maven-plugin插件来执行这个任务。下面是一些步骤可以帮助您实现这个目标： 1. 在您的Vue项目根目录下创建一个`pom.xml`文件，并添加以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值