【Vue脚手架】

news2024/12/24 3:53:14

初始化脚手架

如果下载缓慢请配置npm淘宝镜像:
npm config set registry http://registry.npm.taobao.org
全局安装vue脚手架:
vue/clinpm install -g vue/cli

1. 创建项目使用命令
vue create xxx

注:后面有选择安装版本,请注意选择,有vue2/vue3版本,一般选择vue2
2. 启动项目
npm run serve

3. 打包项目
npm run build

4. 暂停项目
Ctrl + c

脚手架文件结构

描述

介绍文件内容

  • src 重要文件,东西都写在里面
    在这里插入图片描述
  • src中: main.js 一切的开端(不可移除和删除)
    在这里插入图片描述
	//引入文件Vue
	import Vue from 'vue'
	//引入App组件
	import App from './App.vue'
	

main.js 文件中 vue.config.productionTip = false 表示关闭生产提示

  • 在src中,还有个大文件 App.vue,是单独放在外面,包含在src里面的,是自带的不可移除(主文件
    在这里插入图片描述
  • babel.config.js文件

babel的控制文件
控制文件

  • 创建好的vue小文件都写在 components 里
    在这里插入图片描述

🚀 下面这个 School.vue 就是小文件放在 components 里
在这里插入图片描述

render函数

功能:创建vue实例对象,将App组件放入容器中

main.js

	
	new Vue({
		el : '#app',
		//将App组件放入容器中
			render: h => h(App),
		})
		
  • vue.js 与 vue.runtime.xxx.js 的区别 :

a. vue.js完整版的vue ,包含:核心功能+模板解析器
b. vue.runtime.xxx.js运行版的vue,只包含核心功能,没有模板解析器

:因为vue.runtime.xxx.js 没有模板解析器,所以不能使用template配置项需要使用render函数接收到的createElement函数去指定具体内容


assets / public

  • 文件 assets 静态资源放置处
  • public 放置 html 文件 ,渲染页面
    在这里插入图片描述

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

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

相关文章

授权协议OAuth 2.0之除了授权码许可还有什么授权流程?

写在前面 源码 。 本文看下OAuth2.0的另外3中授权流程,资源拥有者凭据许可,客户端许可,隐式许可。分别看下具体的使用流程以及该使用场景。 1:资源拥有者凭据许可 资源拥有者凭据许可,这里资源拥有者的凭据是什么呢&…

Vue源码解读学习

Vue源码 观察者模式 & 发布订阅 观察者模式:中心一对多 系统单点间的灵活和拓展(广播的方式) 发布订阅:将注册列表遍历发布给订阅者 initInject initState initProvide他们挂载顺序为什么这样设计? initstate…

MySQL行格式(row format)

MySQL行格式(row format) 表的行格式决定了其行的物理存储方式,这反过来又会影响查询和 DML 操作的性能。随着单个磁盘页面容纳更多行,查询和索引查找可以更快地工作,缓冲池中需要的高速缓存内存更少,写出…

京西商城——前端项目的创建以及前后端联调

创建VUE项目 在jingxi_shop_project文件夹中再创建一个 frontend 文件夹用来存放前端项目 /jingxi_shop_project/backend/jingxi_shop_project....../frontend/jingxi_shop_web......首先要安装 node.js 和 VUE cli,进入到项目目录内创建项目 vue create jingxi_…

[Vision Board创客营]学习片上Flash移植FAL

文章目录 [Vision Board创客营]学习片上Flash移植FAL介绍环境搭建使用组件测试porbeerasewriteread 结语 [Vision Board创客营]学习片上Flash移植FAL 水平较菜,大佬轻喷。😰😰😰 介绍 🚀🚀Vision-Board 开…

解锁流量密码:如何利用HubSpot打造高效的获客策略?(下)

在当今数字化时代,流量是企业成功的关键。HubSpot作为一款全面的营销自动化工具,为我们提供了强大的支持,帮助企业打造高效的流量获取策略。接下来,我们将从社交媒体与SEO优化、自动化营销流程、数据分析与效果评估以及流量获取策…

【R语言】组合图:散点图+箱线图+平滑曲线图+柱状图

用算数运算符轻松组合不同的ggplot图,如图: 具体代码如下: install.packages("devtools")#安装devtools包 devtools::install_github("thomasp85/patchwork")#安装patchwork包 library(ggplot2) library(patchwork) #p1是…

Linux进程和任务管理

目录 一.程序和进程的关系 程序 进程 线程 线程与进程的区别 二.查看进程信息ps 方法一 常用选项 方法二 三.TOP动态查看进程信息 进程信息区各列解释 top常用命令 系统查看命令总结 查看进程信息pgrep 查看进程树pstree 四.控制进程 进程的启动方式 进程的前…

electron的webview和内嵌网页如何通信

在 Electron 的世界里,webview 标签相当于一个小盒子,里面可以装一个完整的网页,就像一个迷你浏览器。当你想和这个小盒子里的内容说话时(也就是进行通信),这里有几个方法可以帮你做到: 这里只写…

LIUNX文件系统

目录 1.磁盘的物理结构 2.CHS定位法 3.磁盘的逻辑存储 4.系统层面 inode.block[15] 创建文件的流程 查找文件的流程 了解文件系统,首先要了解磁盘是如何存储和读取数据的。 1.磁盘的物理结构 可以理解这个盘上有很多的小磁铁,通过旋转盘面和摆动…

LeetCode-热题100:114. 二叉树展开为链表

题目描述 给你二叉树的根结点 root ,请你将它展开为一个单链表: 展开后的单链表应该同样使用 TreeNode ,其中 right 子指针指向链表中下一个结点,而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例…

内业减少80%人工操作,林地地形轻松测!

林业作为维护生态平衡和保护环境的关键领域,其科学管理和合理利用是当前林业工作的重中之重。林业调查旨在全面了解当前林业资源的状况,其中林地地形测量是林业调查的基础工作。通过对林地地形的准确测量,可获取森林的地理位置、面积、地貌、…

探索VR数字展厅,对企业未来展示新模式

在数字化浪潮的推动下,企业展示也在经历着一场革命,VR数字展厅正在以一种全新的方式重塑我们的生活和工作空间,不仅重塑了客户的观展体验,也为企业营销打开了新的渠道。 VR数字展厅作为实体展厅的数字化延伸,正以其沉浸…

C++笔记:引用

目录 概念: ​编辑 引用的特性: 引用中的权限问题: 引用与指针的区别: 引用的使用: 概念: 引用是给已存在变量取一个别名,编译器不会为引用变量开辟内存空间。 引用的符号:&…

物联网网络传输,STM32和ESP32

2024.4.17 今天主要是记录一下我这个STM32F407和esp8266组成的互联网板子的一些例程运行心得, 下面这个例程是STM32发AT指令给esp8266,使得esp8266作为tcp client连接到我的手机热点,然后我用电脑连接wifi,打开tcp server&#x…

上海晋名室外气瓶暂存柜海盐项目落地

上周海盐县人民医院武原分院的SAVEST室外气瓶暂存柜项目成功交付验收,此次项目主要用于医院气瓶等室外暂存安全。 用户单位在日常工作运营中涉及到氧气瓶、杜瓦罐等室外安全储存问题,用户在寻找解决方案的过程中搜索到上海晋名的室外气瓶暂存柜系列后挺感…

贪心问题:134. 加油站

https://leetcode.cn/problems/gas-station/ 贪心算法还没找到规律,记录一下该题的思路吧。。。 每个加油站的剩余量rest[i]为gas[i] - cost[i]。 首先如果总油量减去总消耗大于等于零那么一定可以跑完一圈,说明 各个站点的加油站 剩油量rest[i]相加一定…

【AI学习中常见专业英文缩写词的解释】

前言: 为了看着不无聊,文中插入了一些AI生成的狗图片 AI(Artificail Intelligence)人工智能: 让机器模拟和展示人类智能的技术。 GAI(Generative Artificail Intelligence)生成式人工智能: 利用复杂的算法、模型和规则,从大规…

19.leetcode---设计循环队列(Java版)

题目链接:https://leetcode.cn/problems/design-circular-queue/ 题解: 代码: 测试:

LeetCode 506.和为K的子数组

目录 题目描述 方法一 三重循环暴力 思路: 代码: 方法二 暴力一点点前缀和 思路: 代码: 方法三 前缀和哈希表 思路: 代码: 题目描述 给你一个整数数组 nums 和一个整数 k ,请你统计并…