Node.js、Vue的安装与使用(Linux OS)
Vue的安装与使用(Linux OS)
- Node.js的安装
- Vue的安装
- Vue的使用
操作系统:Ubuntu 20.04 LTS
Node.js的安装
- 安装Node.js
Node.js官方下载地址
1.选择合适的系统架构(可通过uname -m查看)版本安装

2.下载文件为tar.xz格式,进入到下载目录下,执行如下命令,解压文件
cd 下载
xz -d *.tar.xz # 解压为tar文件
tar xvf *.tar # 解压tar文件
3.在/usr/local文件夹下新建一个名为nodejs的文件夹
cd /usr/local
mkdir nodejs
4.将解压的文件移动到nodejs下
cd 下载
mv node-v12.14.0-darwin-x64/* /usr/local/nodejs #node-v12.14.0-darwin-x64为解压的文件夹名
5.此时的bin文件夹中已经存在node以及npm,如果你进入到对应文件的中执行命令行一点问题都没有,不过不是全局的,所以通过建立软链接的方式将这个设置为全局
ln -s /usr/local/nodejs/bin/node /usr/local/bin
ln -s /usr/local/nodejs/bin/npm /usr/local/bin
6.测试

Vue的安装
1.全局安装Vue脚手架
npm install -g @vue/cli
2.配置淘宝镜像
npm config set registry http://registry.npm.taobao.org/
3.建立软链接
sudo ln -s /usr/local/nodejs/bin/vue /usr/bin/vue
Vue的使用
1.建立项目文件夹,创建vue目录
mkdir code
cd code
vue create vue # 创建vue目录
配置选择如下:

配置解释如下:

2.使用IDE打开vue目录(此时以IDEA为例),文档结构如下:

HomeView.vue为首页展示文件,App.vue为入口文件
3.终端输入npm run serve启动vue(可以通过IDEA自带Terminal执行)


4.浏览器输入http://localhost:8080访问首页,展示如下:

5.终端输入npm i element-ui -S导入element-ui,导入完成后npm run serve重启vue

6.查阅官方文档,在main.js下添加缺失语句


import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI, {size: 'mini'});
7.测试
HomeView.vue下,在适当位置添加
el-button标签,刷新浏览器查看


相关文章:
Node.js、Vue的安装与使用(Linux OS)
Vue的安装与使用(Linux OS) Node.js的安装Vue的安装Vue的使用 操作系统:Ubuntu 20.04 LTS Node.js的安装 安装Node.js Node.js官方下载地址 1.选择合适的系统架构(可通过uname -m查看)版本安装 2.下载文件为tar.xz格…...
SparkSQL入门
概述 两种模式 Spark on Hive: 语法是Spark SQL语法,实际上是在IDEA上编写java叠加SQL的代码。 Hive on Spark: 只是替换了Hadoop的MR,改为了Spark的计算引擎。 发展历史 RDD > DataFrame > DataSet: 都有惰性机制,遇…...
AC修炼计划(AtCoder Regular Contest 167)
传送门:AtCoder Regular Contest 167 - AtCoder 再次感谢樱雪喵大佬的题解,讲的很详细,Orz。 大佬的博客链接如下:Atcoder Regular Contest 167 - 樱雪喵 - 博客园 (cnblogs.com) 第一题很签到,就省略掉了。 第二题…...
暄桐四阶课程「自在行草」学习装备指南
在2011年,暄桐成立的最初,课程便是面向零基础的成年人设计的。在十余年的教学实践中,暄桐教室为同学们提供了一种系统、有趣、扎实,并可持续进阶的学习可能。许多同学都是在来到暄桐以后,才第一次拿起毛笔,…...
vue3 列表页开发【选择展示列】功能
目录 背景描述: 开发流程: 详细开发流程: 总结: 背景描述: 这个功能是基于之前写的 封装列表页 的功能继续写的,加了一个选择展示列的功能,可以随时控制表格里展示那些列的数据…...
uniapp——自定义组件插槽及使用
案例样式 自定义组件pageBox.vue <template><view><view class"bgColor" :style"{ height: bgHeight rpx }"></view><view class"main"><!-- 主要内容放这里 --><slot></slot></view>&…...
微信native-v3版支付对接流程及demo
1.将p12证书转为pem证书,得到商户私钥 openssl pkcs12 -in apiclient_cert.p12 -out apiclient_cert.pem -nodes 密码是:商户id 2.将获取到的apiclient_cert.pem证书,复制出这一块内容,其他的不要 3.下载这个工具包 https://gi…...
租用服务器后需要注意什么
租用服务器后需要注意什么 1、从IDC服务商中接收到服务器时,需要对服务器的各项性能进行测试确认,并做好记录以便对服务器的性能做到心中有数。 2、在服务器租用交接时,要了解服务器的安全设置情况,对服务器安全技术方面不了解的…...
【公众号开发】图像文字识别 · 模板消息推送 · 素材管理 · 带参数二维码的生成与事件的处理
【公众号开发】(4) 文章目录 【公众号开发】(4)1. 图像文字识别功能1.1 百度AI图像文字识别接口申请1.2 查看文档学习如何调用百度AI1.3 程序开发1.3.1 导入依赖:1.3.2 公众号发来post请求格式1.3.3 对image类型的消息…...
Linux---(三)基本指令大全
前提引入:历史上先出现的键盘还是鼠标? 答案:键盘 ✨所以刚开始的时候绝对没有图形化界面,因此操作系统刚开始兴起的时候绝对没有图形化界面,因为当时没有鼠标。 ✨因为没有图形化界面,只有键盘,…...
基于selenium的pyse自动化测试框架
介绍: pyse基于selenium(webdriver)进行了简单的二次封装,比selenium所提供的方法操作更简洁。 特点: 默认使用CSS定位,同时支持多种定位方法(id\name\class\link_text\xpath\css)…...
【微服务 SpringCloudAlibaba】实用篇 · Nacos注册中心
微服务(5) 文章目录 微服务(5)1. 认识和安装Nacos2. 服务注册到nacos和拉取服务1)引入依赖2)配置nacos地址3)重启 3. 服务分级存储模型3.1 给user-service配置集群3.2 同集群优先的负载均衡 4. …...
华为手机安卓扫描安装包apk在哪
1、在文件管理器里找,有的安装包没有搜索到2、在应用市场-我的-安装包管理,它会扫描整个手机,推荐...
IDEA 新版本设置菜单展开
使用了新版本的IDEA 新UI后,常用的file,view,菜单看不见了,不太适应,找了一下,有个配置可以修改。 打开settings里面把show main menu in a separate toolbar勾选上,应用保存就可以了...
Leetcode 350:两个数组的交集II
给你两个整数数组 nums1 和 nums2 ,请你以数组形式返回两数组的交集。返回结果中每个元素出现的次数,应与元素在两个数组中都出现的次数一致(如果出现次数不一致,则考虑取较小值)。可以不考虑输出结果的顺序。 示例 1…...
【数据结构】队列的实现与优化指南
一、前言 队列是一种重要的数据结构,它按照“先入先出”(FIFO)的原则管理数据。本文将介绍队列的概念、应用场景,以及如何使用数组实现普通队列和环形队列。 二、内容 2.1 概述 (1)什么是队列࿱…...
视频太大怎么压缩变小?三分钟学会视频压缩
随着科技的不断发展,视频已经成为了我们日常生活中不可或缺的一部分,然而,大尺寸的视频文件常常会给我们带来诸多困扰,例如发送不便、存储空间不足等等,那么,如何将这些过大的视频文件压缩变小呢࿱…...
Rust 泛型
泛型 Generics泛型详解 使用泛型参数,有一个先决条件,必需在使用前对其进行声明: fn largest<T>(list: &[T]) -> T {该泛型函数的作用是从列表中找出最大的值,其中列表中的元素类型为 T。首先 largest<T> 对…...
STM32+2.9inch微雪墨水屏(电子纸)实现显示
本篇文章从硬件原理以及嵌入式编程等角度完整的介绍了墨水屏驱动过程,本例涉及的墨水屏为2.9inch e-Paper V2,它采用的是“微胶囊电泳显示”技术进行图像显示,其基本原理是悬浮在液体中的带电纳米粒子受到电场作用而产生迁移,从而改变显示屏各…...
Hadoop3教程(二十九):(生产调优篇)集群扩容及缩容(白名单与黑名单)
文章目录 (150)添加白名单(151)服役新服务器(152)服务器间数据均衡(153)黑名单退役服务器参考文献 这一章还算是比较重要的。 (150)添加白名单 白名单&#…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
elementUI点击浏览table所选行数据查看文档
项目场景: table按照要求特定的数据变成按钮可以点击 解决方案: <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...
智能职业发展系统:AI驱动的职业规划平台技术解析
智能职业发展系统:AI驱动的职业规划平台技术解析 引言:数字时代的职业革命 在当今瞬息万变的就业市场中,传统的职业规划方法已无法满足个人和企业的需求。据统计,全球每年有超过2亿人面临职业转型困境,而企业也因此遭…...
规则与人性的天平——由高考迟到事件引发的思考
当那位身着校服的考生在考场关闭1分钟后狂奔而至,他涨红的脸上写满绝望。铁门内秒针划过的弧度,成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定",构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...
