Node.js、Vue的安装与使用(Linux OS)

Vue的安装与使用(Linux OS)

操作系统:Ubuntu 20.04 LTS


Node.js的安装

1.选择合适的系统架构(可通过uname -m查看)版本安装

2.下载文件为tar.xz格式,进入到下载目录下,执行如下命令,解压文件

shell 复制代码
cd 下载
xz -d *.tar.xz	# 解压为tar文件
tar xvf *.tar	# 解压tar文件

3.在/usr/local文件夹下新建一个名为nodejs的文件夹

shell 复制代码
cd /usr/local
mkdir nodejs

4.将解压的文件移动到nodejs下

shell 复制代码
cd 下载
mv node-v12.14.0-darwin-x64/* /usr/local/nodejs		#node-v12.14.0-darwin-x64为解压的文件夹名

5.此时的bin文件夹中已经存在node以及npm,如果你进入到对应文件的中执行命令行一点问题都没有,不过不是全局的,所以通过建立软链接的方式将这个设置为全局

shell 复制代码
ln -s /usr/local/nodejs/bin/node /usr/local/bin
ln -s /usr/local/nodejs/bin/npm /usr/local/bin

6.测试

Vue的安装

1.全局安装Vue脚手架

shell 复制代码
npm install -g @vue/cli

2.配置淘宝镜像

shell 复制代码
npm config set registry http://registry.npm.taobao.org/

3.建立软链接

shell 复制代码
sudo ln -s /usr/local/nodejs/bin/vue /usr/bin/vue

Vue的使用

1.建立项目文件夹,创建vue目录

shell 复制代码
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下添加缺失语句

javascript 复制代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI, {size: 'mini'});

7.测试

HomeView.vue下,在适当位置添加el-button标签,刷新浏览器查看


相关推荐
秋千码途2 分钟前
小架构step系列10:日志热更新
java·linux·微服务
Rainbow_Pearl39 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
三体世界1 小时前
TCP传输控制层协议深入理解
linux·服务器·开发语言·网络·c++·网络协议·tcp/ip
熊出没2 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN2 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
x县豆瓣酱2 小时前
ubuntu server配置静态IP
linux·运维·ubuntu
工藤新一¹2 小时前
Linux
linux·运维·服务器
许白掰2 小时前
Linux入门篇学习——Linux 编写第一个自己的命令
linux·运维·数据库·嵌入式硬件·学习
打不了嗝 ᥬ᭄2 小时前
文件系统----底层架构
linux·运维·数据库
江城开朗的豌豆3 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js