Node.js、Vue的安装与使用（Linux OS）

Insight.2023-10-21 16:48

操作系统：Ubuntu 20.04 LTS

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.测试

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

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