【Vue】学习笔记-初始化脚手架

初始化脚手架

  • 初始化脚手架
    • 说明
    • 具体步骤
    • 脚手架文件结构

初始化脚手架

说明

  1. Vue脚手架是vue官方提供的标准化开发工具(开发平台)
  2. 最新版本是4.x
  3. 文档Vue CLI

具体步骤

  1. 如果下载缓慢请配置npm淘宝镜像 npm config set registry http://registry.npm.taobao.org
    在这里插入图片描述

  2. 全局安装@vue/cli npm install -g @vue/cli
    在这里插入图片描述

  3. 切换到创建项目的目录,使用命令创建项目vue create xx

  4. 选择使用vue的版本
    在这里插入图片描述在这里插入图片描述

  5. 启动项目npm ruan serve
    在这里插入图片描述
    在这里插入图片描述

  6. 打包项目 npm run build

  7. 暂停项目 Ctrl+C

Vue脚手架隐藏了所有webpack 相关的配置,若想查看具体的webpack配置,请执行vue inspect >output.js

脚手架文件结构

在这里插入图片描述
src/components/School.vue

<template>
	<div class="demo">
		<h2>学校名称:{{name}}</h2>
		<h2>学校地址:{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

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

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

src/components/Student.vue

<template>
	<div>
		<h2>学生姓名:{{name}}</h2>
		<h2>学生年龄:{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

src/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>

src/main.js

/* 
	该文件是整个项目的入口文件
*/
//引入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),
	// render:q=> q('h1','你好啊')

	// template:`<h1>你好啊</h1>`,
	// components:{App},
})

public/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">
    <!-- 配置网页标题 -->
    <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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

浅谈个人对“孔乙己的长衫“的感受

名人说&#xff1a;往者不可谏&#xff0c;来者犹可追。——《论语微子篇》 创作者&#xff1a;Code_流苏(CSDN) ★温馨提示&#xff1a;以下仅代表个人观点&#xff0c;不代表其它任何人看法。 目录 〇、缘由一、社会对于学历和职业之间的关系认知是怎样的&#xff1f;二、学…

【算法】从x的n次方看递归时间复杂度计算

从x的n次方看递归时间复杂度计算 1.循环 这个问题&#xff0c;最简单的办法是用循环 int pow1(int x,int n) {int result 1;for(int i0;i<n;i){result*x;}return result; }如上算法的时间复杂度为O(N)&#xff0c;但还是不够理想。这时尝试使用递归算法 2.递归1 int po…

51单片机入门

文章目录 一、安装keil5及proteus二、MCS-51单片机结构与原理(一).8051单片机基本组成(二).8051单片机引脚1.电源引脚2.时钟电路引脚3.控制信号引脚4.输入/输出端口 (三) 并行输入/输出端口结构 三、单片机cx51编程基础(一).变量定义(二).数据类型(三).存储类型(四).Cx51语言程…

快手社招Java后端开发岗面试,被问麻了

社招面试是基于你的工作项目来展开问的&#xff0c;比如你项目用了 xxx 技术&#xff0c;那么面试就会追问你项目是怎么用 xxx 技术的&#xff0c;遇到什么难点和挑战&#xff0c;然后再考察一下这个 xxx 技术的原理。 今天就分享一位快手社招面经&#xff0c;岗位是后端开发&…

使用vue.component全局注册组件、props的使用

通过components注册的是私有子组件 例如&#xff1a; 在组件A的 components 节点下&#xff0c;注册了组件F。 则组件F只能用在组件A中;不能被用在组件C中。 注册全局组件 在vue项目的 main.js 入口文件中&#xff0c;通过 Vue.component() 方法&#xff0c;可以注册全局组件…

springboot+vue小区物业管理系统(源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的小区物业管理系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 &#x1f495;&#x1f495;作者&#xff1a;风…

【2023软考】信息系统监理师与系统集成项目管理工程师哪个更好考?

肯定是系统集成项目管理工程师更好考。 软考信息系统监理师是一项国家级专业职业资格证书&#xff0c;是我国信息技术行业的重要职业资格之一。软考信息系统监理师主要从事信息系统建设项目的监理和管理工作&#xff0c;包括项目前期准备、项目实施阶段和项目验收阶段的监理和…

字符串总结

一、最长公共前缀 1.方法一&#xff1a;横向扫描 class Solution { public:string longestCommonPrefix(vector<string>& strs) {if (!strs.size()) {return "";}string prefix strs[0];int count strs.size();for (int i 1; i < count; i) {prefix…

VS同时调试主程序和子程序工具

VS要想要实现同时调试主程序和子程序&#xff0c;可使用工具 Microsoft Child Process Debugging power Tool 来实现。 我的环境和官方使用说明 环境&#xff1a;VS2019 官方使用说明&#xff1a;Introducing the Child Process Debugging Power Tool - Azure DevOps Blogh…

Shell编程规范与使用

目录 一、Shell脚本概述 1&#xff09;Shell的作用——命令解释器&#xff0c;“翻译官” 2&#xff09;常见shell解释器 3&#xff09;编程语言类型 4&#xff09;Shell脚本 编写脚本代码 Shell脚本的构成 赋予可执行权限 Shell脚本的执行方法 5&#xff09;重定向与…

【学习笔记】unity脚本学习(六)【GUI发展历程、IMGUI控件、Layout自动布局】

目录 unity 界面发展IMGUINGUI其他GUI插件uGUIUI 工具包比较 GUI基础GUI静态变量Unity扩展编辑器屏幕空间的总尺寸Screen.width 和 Screen.height GUI静态函数&#xff08;GUI控件&#xff09;Label图片 Box控件Button与RepeatButtonTextFieldTextAreaPasswordField其他控件 GU…

缓存优化---环境搭建

缓存优化 为什么要使用redis缓存&#xff1f; 问题说明 用户数量多&#xff0c;系统访问大&#xff0c;频繁访问数据库&#xff0c;系统性能下降&#xff0c;用户体验差 环境搭建 maven坐标 在项目中的pom.xml文件中导入spring data redis的maven坐标&#xff1a; <depen…

Java+GeoTools实现WKT数据根据EPSG编码进行坐标系转换

场景 JavaGeoTools(开源的Java GIS工具包)快速入门-实现读取shp文件并显示&#xff1a; JavaGeoTools(开源的Java GIS工具包)快速入门-实现读取shp文件并显示_霸道流氓气质的博客-CSDN博客 在上面实现Java中集成Geotools之后&#xff0c;需求是将WKT数据转换成其他坐标系的W…

web前端实验5

实 验 报 告 课 程 Web前端应用开发 实验项目 Jquery AJAX编程 成 绩 专业班级 班内序号 指导教师 姓 名 学 号 实验日期 实验目的及要求&#xff1a; &#xff08;1&#xff09; 理解和掌握Jquery AJAX的get方式请求 &#xff08;2&#xff09; 理解和掌握Jquery AJAX的pos…

Redis可视化工具-Another Redis Desktop Manager 安装与连接哨兵集群

目录 一、下载安装 1.1 下载 1.2 安装 二、使用 2.1 新建连接 2.2 新增数据 2.3 应用设置 2.3.1深色模式、语言 2.3.2多个连接的颜色标记 一、下载安装 Another Redis DeskTop Manager 是 Redis 可视化管理工具&#xff0c;体积小&#xff0c;完全免费。最重要的是稳定…

低代码平台名声臭,用起来却真香——60%开发者不敢承认

群体盲从意识会淹没个体的理性&#xff0c;个体一旦将自己归入该群体&#xff0c;其原本独立的理性就会被群体的无知疯狂所淹没。——《乌合之众》 不知道从什么时候开始&#xff0c;“低代码不行”的论调充斥着整个互联网圈子&#xff0c;csdn、掘金、知乎、B站、脉脉……到处…

面试华为,花了2个月才上岸,真的难呀····

花2个月时间面试一家公司&#xff0c;你们觉得值吗&#xff1f; 背景介绍 美本计算机专业&#xff0c;代码能力一般&#xff0c;之前有过两段实习以及一个学校项目经历。第一份实习是大二暑期在深圳的一家互联网公司做前端开发&#xff0c;第二份实习由于大三暑假回国的时间比…

32岁阿里P7,把简历改成不知名小公司,学历改成普通本科,工作内容不变,投简历全挂!...

hr靠什么来招人&#xff1f; 一位猎头讲述了自己和朋友打赌的故事&#xff1a; 朋友在阿里云&#xff0c;32岁&#xff0c;P7&#xff0c;他把简历上的公司改成不知名&#xff0c;学历改成普通本科&#xff0c;工作内容不变&#xff0c;结果投其他公司&#xff08;比如京东&…

Spring Boot异步任务、异步消息

目录 1.异步任务 1.1.概述 1.2.使用 2.异步消息 2.1.概述 2.2.使用 1.异步任务 1.1.概述 举一个例子&#xff0c;我现在有一个网上商城&#xff0c;客户在界面点击下单后&#xff0c;后台需要完成两步&#xff1a; 1.创建客户订单 2.发短信通知客户订单号 这里面第2…

【hello Linux】理解文件系统

目录 创建文件的过程&#xff1a; 删除文件的过程&#xff1a; 创建目录的过程&#xff1a; 查看inode编号&#xff1a; 硬链接 软链接 Linux&#x1f337; 我们知道文件所有数据 文件内容 文件属性信息&#xff1b; 未打开的文件是被存放到磁盘/固态硬盘中的&#xff1b; …
最新文章