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.mzph.cn/news/114867.shtml

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

相关文章

uniapp自定义右击菜单

效果图&#xff1a; 代码&#xff1a; 1、需要右击的view: <view class"answer-box" contextmenu.stop.prevent.native"showRightMenu($event, item, content)"> </view>2、右击弹出层&#xff1a; <view v-if"visible" :styl…

智慧矿山:让AI算法提高未戴安全带识别率!

未穿戴安全带识别AI算法&#xff0c;作为智慧矿山的重要应用之一&#xff0c;不仅可以有效提高矿山工作人员的安全意识&#xff0c;还可以降低事故发生的概率。然而&#xff0c;识别准确率的提高一直是该算法面临的挑战之一。为了解决这个问题&#xff0c;研究人员不断努力探索…

JavaEE初阶学习:Servlet

1.Servlet 是什么 Servlet 是一种 Java 程序&#xff0c;用于在 Web 服务器上处理客户端请求和响应。Servlet 可以接收来自客户端&#xff08;浏览器、移动应用等&#xff09;的 HTTP 请求&#xff0c;并生成 HTML 页面或其他格式的数据&#xff0c;然后将响应发送回客户端。S…

【C++】C++11新特性

文章目录 一、C发展简介二、C11简介三、列表初始化1.统一使用{}初始化2.initializer_list类 四、变量的类型推导1.auto2.decltype3.nullptr 五、范围for循环六、STL中一些变化七、final与override八、新的类功能1.新增默认成员函数2.成员变量的缺省值3.default 和 delete4.fina…

LABVIEW 安装教程(超详细)

目录 LabVIEW2017&#xff08;32/64位&#xff09;下载地址&#xff1a; 一 .简介 二.安装步骤&#xff1a; LabVIEW2017&#xff08;32/64位&#xff09;下载地址&#xff1a; 链接&#xff1a; https://pan.baidu.com/s/1eSGB_3ygLNeWpnmGAoSwcQ 密码&#xff1a;gjrk …

JAVA面经整理(MYSQL篇)

索引: 索引是帮助MYSQL高效获取数据的排好序的数据结构 1)假设现在进行查询数据&#xff0c;select * from user where userID89 2)没有索引是一行一行从MYSQL进行查询的&#xff0c;还有就是数据的记录都是存储在MYSQL磁盘上面的&#xff0c;比如说插入数据的时候是向磁盘上面…

C++ 类和对象(六)赋值运算符重载

1 运算符重载 C为了增强代码的可读性引入了运算符重载&#xff0c;运算符重载是具有特殊函数名的函数&#xff0c; 也具有其返回值类型&#xff0c;函数名字以及参数列表&#xff0c;其返回值类型与参数列表与普通的函数类似。 函数名字为&#xff1a;关键字operator后面接需…

css之Flex弹性布局(父项常见属性)

文章目录 &#x1f415;前言&#xff1a;&#x1f3e8;定义flex容器 display:flex&#x1f3e8;在flex容器中子组件进行排列&#x1fa82;行排列 flex-direction: row&#x1fa82;将行排列进行翻转排列 flex-direction: row-reverse&#x1f3c5;按列排列 flex-direction: col…

No170.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

mstsc改端口为33389

windows 远程默认端口3389不太安全&#xff0c;改成33389防下小人 把下面的2个文本存在后缀.reg的文件&#xff0c;双击导入注册表&#xff0c;"PortNumber"dword:0000826d 这个就是33389对应的端口号的16进制值&#xff0c;要想自己改成其它的换下值即可 Windows …

人工智能、机器学习、深度学习的区别

人工智能涵盖范围最广&#xff0c;它包含了机器学习&#xff1b;而机器学习是人工智能的重要研究内容&#xff0c;它又包含了深度学习。 人工智能&#xff08;AI&#xff09; 人工智能是一门以计算机科学为基础&#xff0c;融合了数学、神经学、心理学、控制学等多个科目的交…

LeetCode讲解篇之77. 组合

文章目录 题目描述题解思路题解代码 题目描述 题解思路 遍历nums&#xff0c;让当前数字添加到结果前缀中&#xff0c;递归调用&#xff0c;直到前缀的长度为k&#xff0c;然后将前缀添加到结果集 题解代码 func combine(n int, k int) [][]int {var nums make([]int, n)fo…

最新!两步 永久禁止谷歌浏览器 Google Chrome 自动更新

先放效果图&#xff1a; CSDN这个问题最火的大哥的用了没用 像他这样连浏览器都打不开 为什么要禁止chrome自动更新 看到很多搞笑的大哥&#xff0c;说为啥要禁止&#xff1b; 我觉得最大的原因就是chromedriver跟不上chrome的自动更新&#xff0c;导致我们做selenium爬虫的…

MySQL数据库查询实战操作

前置条件: 创建库:MySQL基本操作之创建数据库-CSDN博客 创建表:MySQL基本操作之创建数据表-CSDN博客 目录 常规查询常用函数union查询一、常规查询 普通的查询方式 1、查询所有姓名以 "张" 开头的学生: SELECT * FROM student WHERE name LIKE 张%; 这条语…

支付风控规则

支付宝使用基本风控规则 一、 6个规则 1、规则一&#xff1a;30分钟内&#xff0c;不要连续刷3笔&#xff08;包括失败交易&#xff09;&#xff0c;两笔交易时间间隔大于5分钟&#xff0c;交易金额不要一样&#xff0c;不要贴近限额&#xff1b; 2、规则二&#xff1a;非正…

matlab中绘制 维诺图(Voronoi Diagram)

1.专业术语&#xff08;相关概念&#xff09;&#xff1a; 基点Site&#xff1a;具有一些几何意义的点 细胞Cell&#xff1a;这个Cell中的任何一个点到Cell中基点中的距离都是最近的&#xff0c;离其他Site比离内部Site的距离都要远。 Cell的划分&#xff1a;基点Site与其它的…

Java中的static关键字

一、static关键字的用途 在《Java编程思想》P86页有这样一段话&#xff1a; “static方法就是没有this的方法。在static方法内部不能调用非静态方法&#xff0c;反过来是可以的。而且可以在没有创建任何对象的前提下&#xff0c;仅仅通过类本身来调用static方法。这实际上正是s…

app分发的一些流程

应用分发的流程通常包括以下步骤&#xff1a; 开发应用程序&#xff1a;首先&#xff0c;您需要开发您的应用程序。这包括编写代码、设计用户界面、测试应用程序等等。确保您的应用程序符合各个应用商店的规范和要求&#xff0c;以确保顺利通过审核。 准备应用材料&#xff1a…

Linux系统管理:虚拟机Kylin OS安装

目录 一、理论 1.Kylin OS 二、实验 1.虚拟机Kylin OS安装准备阶段 2.安装Kylin OS 3.进入系统 一、理论 1.Kylin OS &#xff08;1&#xff09;简介 麒麟操作系统&#xff08;Kylin OS&#xff09;亦称银河麒麟&#xff0c;是由中国国防科技大学、中软公司、联想公司…

vue3点击表格某个单元格文本就切换成输入框,其他单元格不变化

<el-table :data"data.tableData" height"60vh" border scrollbar-aways-on><el-table-column label"序号" type"index" width"80" fixed /><el-table-column label"操作" width"120" f…