Vue2 vue-cli

news/2024/11/15 4:02:20/

安装与卸载vue脚手架

npm i -g @vue/cli
vue --version 查看vue脚手架版本
vue -V 查看vue脚手架版本
npm uninstall -g @vue/cli 卸载

创建项目

vue create 项目名
选择项目 (Default 为快速创建项目)
选择最后一下,回车
在这里插入图片描述

上下键选择 Router 空格选中 a选中所有
linter用于语法检查
babel es6语法转es5
选择完成回车下载
在这里插入图片描述
如果设置了路由,会出现路由模式选择
在这里插入图片描述

选择vue版本,回车
在这里插入图片描述

选择配置文件(In dedicated config files)
在这里插入图片描述
选择是否将当前配置保存(y)
在这里插入图片描述
设置当前配置名称
项目创建完成
在这里插入图片描述

进入项目文件夹 npm run serve 运行项目
ctrl+c终止项目

在这里插入图片描述
main.js

在这里插入图片描述
jsconfig.json
在这里插入图片描述

打包

方法一

vue.config.js
在这里插入图片描述
npm run build
在这里插入图片描述
项目生成
在这里插入图片描述
将此文件放到服务器上就能成功运行

方法二

npm run build
在这里插入图片描述
项目生成
在这里插入图片描述
vscode打开index.html
格式化文本
将所有引用改为以“./”开头的路径
在这里插入图片描述

项目环境变量

作用:改变服务器地址

查看当前项目环境变量

main.js
在这里插入图片描述
运行 npm run serve
在这里插入图片描述

设置开发环境的环境变量

在这里插入图片描述
在这里插入图片描述
VUE_APP_为固定开头,BASE_URL为变量名
重启项目

设置生产环境环境变量

在这里插入图片描述
在这里插入图片描述
重启项目

获取baseUrl

.env.development
在这里插入图片描述

在这里插入图片描述
重新运行,开发环境打印:
在这里插入图片描述

scoped

用于组件样式不互相干扰

app.js
在这里插入图片描述
子组件 HelloWorld.vue
在这里插入图片描述

在这里插入图片描述

样式穿透

父组件样式使用scoped
子组件如果想要使用父组件某一个dom元素的的样式,需要使用样式穿透

<style scoped>/deep/ h2{color:red}
</style>

http://www.ppmy.cn/news/252869.html

相关文章

【TCP/IP】基于UDP的服务器端/客户端实现 II - 实践与实现

基于UDP的回声服务器端/客户端 结合之前基于TCP实现的回声服务器&#xff0c;我们尝试再用UDP来完成对回声服务器/客户端的设计。 echo_server: #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <arpa…

2023年浏览器哪个好,如何选择浏览器?

浏览器作为电脑必备的软件之一&#xff0c;相信绝大多数人都用过。选择一款好用的浏览器&#xff0c;可以帮助我们提升工作效率。那么&#xff0c;浏览器哪个比较好&#xff0c;我们如何选择合适的浏览器&#xff1f;为了找到集速度、易用性、安全于一身的浏览器&#xff0c;我…

【SpinalHDL快速入门】5.3、SpinalHDL组织结构之function

文章目录 1.1、简介1.2、RGB to gray1.3、Valid Ready Payload 总线 1.1、简介 使用Scala function 生成硬件的方式与VHDL/Verilog有很大不同&#xff1a; 您可以在其中实例化寄存器、组合逻辑和组件。您不必使用限制信号赋值范围的 process/always 块。一切都是通过引用传递…

SpringCloud-stream一体化MQ解决方案-概念篇

参考资料: 参考demo 参考视频1 参考视频2 官方文档(推荐) 官方文档中文版 关于Kafka和rabbitMQ的安装教程,见本人之前的博客 rocketMq的安装教程

外置光驱DVD-RW错误解决

解决方式&#xff1a; 1&#xff1a;USB供电不足&#xff0c;切换3.0接口&#xff1b; 2&#xff1a;设置区域

html文件怎么用影音先锋打开,先锋影音怎么用

先锋影音怎么用 首先下载影音先锋&#xff0c;你可以在本页面下面下载影音先锋&#xff0c;也可以访问百度首页&#xff0c;在百度搜索“影音先锋”&#xff0c;点击“百度一下”&#xff0c;然后进入影音先锋的官方网站。 点击“影音先锋晕3D版下载”按钮开始下载影音先锋&…

DVD列表

欧美片&#xff1a;杀死比尔1 杀死比尔2 蜘蛛侠1 蜘蛛侠2 花木兰2 华氏911 生化危机2 特洛伊 蝎子王 美丽人生D5 美丽人生 D9 太阳泪 终结者2 MK 赤裸特工 黑客帝国1 花花公子50年纪念 2D9 魔戒1 魔戒2 魔戒3 拯救大兵瑞恩 战栗汪洋 阿甘正传 勇敢的心 ML 勇敢的心 CJ 怒海争锋…

DVD-R和DVD+R有什么区别

要说区别&#xff0c;我想先说说关于DVD碟片的一些历史,让大家了解为什么DVD碟片会有/-之分。 1997年&#xff0c;日本先锋(Pioneer)公司发布了全球第一款DVD刻录机&#xff0c;当时的售价高达35,000美元&#xff0c;想想现在的价格&#xff0c;大家还是很幸福的。该款刻录机使…