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标签,刷新浏览器查看

在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序之个人中心授权登录

🎬 艳艳耶✌️:个人主页 🔥 个人专栏 :《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 越努力 ,越幸运。 1.了解微信授权登录 微信登录官网: 小程序登录https://developers.weixin.qq.com/miniprogram/d…

SystemVerilog Assertions应用指南 Chapter 1.17使用参数的SVA检验器

1.17使用参数的SVA检验器 SVA允许像 Verilog那样在检验器中使用参数( parameter),这为创建可重用的属性提供了很大的灵活性。比如,两个信号间的延迟信息可以在检验器中用参数表示,那么这种检验器就可以在设计只有时序关系不同的情况中重用。例子1.2显示了个带延迟默…

人大金仓与哪吒科技达成战略合作,加快推动智慧港口建设

近日,人大金仓与哪吒港航智慧科技(上海)有限公司(以下简称“哪吒科技”)达成战略合作。双方旨在共享优势资源,联合为港口企业转型升级提供完备的技术支撑与行业解决方案。人大金仓总裁杜胜、哪吒科技总经理…

基于FPGA的图像拉普拉斯变换实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a vivado2019.2 3.部分核心程序 timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 202…

cdm解决‘ping‘ 或者nslookup不是内部或外部命令,也不是可运行的程序或批处理文件的问题

当我们在执行cmd时,会出现不是内部或外部命令,也不是可运行的程序的提示。 搜索环境变量 点开高级 >> 环境变量 打开Path,看是否在Path变量值中存在以下项目: %SystemRoot%/system32; %SystemRoot%; %SystemRoot%/Syste…

Opencv之RANSAC算法用于直线拟合及特征点集匹配详解

Opencv之RANSAC算法用于直线拟合及特征点集匹配详解 讲述Ransac拟合与最小二乘在曲线拟合上的优缺点 讲述在进行特征点匹配时,最近邻匹配与Ransac匹配的不同之处 另外,Ransac也被用于椭圆拟合、变换矩阵求解等 1. 直线拟合 1.1 原理 RANSAC(RANdom …

Mysql中的RR 隔离级别,到底有没有解决幻读问题

Mysql 中的 RR 事务隔离级别,在特定的情况下会出现幻读的问题。所谓的幻读,表示在同一个事务中的两次相同条件的查询得到的数据条数不一样。 在 RR 级别下,什么情况下会出现幻读 这样一种情况,在事务 1 里面通过 update 语句触发当…

【CGSSA-BP预测】基于混合混沌-高斯变异-麻雀算法优化BP神经网络回归预测研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

手机拍照转机器人末端坐标(九点标定法)

1.打印标定纸,随机九个点 2.让UR机器人末端分别走到P1-P9九个点 在图示位置读取九个点的X,Y坐标 3.手机拍照(固定点) 测试可以随机拍一张,实用的话需要固定手机的拍照位置,得到的图片如下: 4.…

使用AI编写测试用例——详细教程

随着今年chatGPT的大热,每个行业都试图从这项新技术当中获得一些收益我之前也写过一篇测试领域在AI技术中的探索:软件测试中的AI——运用AI编写测试用例现阶段AI还不能完全替代人工测试用例编写,但是如果把AI当做一个提高效率的工具&#xff…

基于单片机设计的家用自来水水质监测装置

一、前言 本文介绍基于单片机设计的家用自来水水质监测装置。利用STM32F103ZET6作为主控芯片,结合水质传感器和ADC模块,实现对自来水水质的检测和监测功能。通过0.96寸OLED显示屏,将采集到的水质数据以直观的方式展示给用户。 随着人们对健…

图论01-【无权无向】-图的基本表示-邻接矩阵/邻接表

文章目录 1. 代码仓库2. 图的基本表示的比较3. 邻接矩阵:Array和TreeSet3.1 图示3.2 Array主要代码解析3.3 测试输出3.4 使用TreeSet的代码 4. 邻接表:LinkedList4.1 图示4.2 LinkedList主要代码解析4.3 测试输出 5. 完整代码5.1 邻接表 - Array5.2 邻接…

深入理解C++红黑树的底层实现及应用

文章目录 1、红黑树简介1.1 、概述:介绍红黑树的定义、特点和用途。 2、红黑树节点的定义3、红黑树结构3.1、红黑树的插入操作 4、红黑树的验证4.1、红黑树的删除4.2、红黑树与AVL树的比较4.3、红黑树的应用 5、总结 1、红黑树简介 1.1 、概述:介绍红黑…

Linux | 深入浅出冯诺依曼

前言 但凡是科班出生的小伙伴多多稍稍应该都听过冯诺依曼体系吧,这似乎已成为入门计算机的必备知识了,本章就带着大家一起去理解冯诺依曼体系; 一、体系构成 冯诺依曼体系主张计算机由五大部件组成,如下所示; 输入设备…

Java设计模式 | 基于订单批量支付场景,对策略模式和简单工厂模式进行简单实现

基于订单批量支付场景,对策略模式和简单工厂模式进行简单实现 文章目录 策略模式介绍实现抽象策略具体策略1.AliPayStrategy2.WeChatPayStrategy 环境 使用简单工厂来获取具体策略对象支付方式枚举策略工厂接口策略工厂实现 测试使用订单实体类对订单进行批量支付结…

Stable Diffusion WebUI报错RuntimeError: Torch is not able to use GPU解决办法

新手在安装玩Stable Diffusion WebUI之后会遇到各种问题, 接下来会慢慢和你讲解如何解决这些问题。 在我们打开Stable Diffusion WebUI时会报错如下: RuntimeError: Torch is not able to use GPU;add --skip-torch-cuda-test to COMMANDL…

操作系统——吸烟者问题(王道视频p34、课本ch6)

1.问题分析:这个问题可以看作是 可以生产多种产品的 单生产者-多消费者问题 2.代码——这里就是由于同步信号量的初值都是1,所以没有使用mutex互斥信号, 总共4个同步信号量,其中一个是 finish信号量

在Lichee RV Dock上的不成功的烧录尝试

最近在学基于risc-v的简单操作系统,刚好手里有块Lichee RV Dock 的板子,所以在学了基础的"hello, world"程序后,想着能不能把这个程序烧录到板子上,简单的做个实验。 要完成这个任务,需要将程序烧录到sd卡上…

专访 Web3Go 新产品 Reiki:培育 AI 原生数字资产与创意新土壤

从 DeFi 到 NFTFi、SocialFi,web3 从业者在尝试 crypto 与区块链技术能为我们的生活、创作、娱乐和文化带来何种新体验,而生成式人工智能的突破性发展则为我们与链上世界的交互、社区内容创作等带来了新的体验,改变互动、交易和价值创造方式。…

容器技术基础

1. Linux Namespace和Cgroups 对于 Docker 等大多数 Linux 容器来说,Cgroups 技术是用来制造约束的主要手段,而 Namespace 技术则是用来修改进程视图的主要方法。 1.1 PID Namespace //Linux 系统正常创建线程 int pid clone(main_function, stack_s…