Ubuntu20.04VueJs+NodeJs开发环境部署

2023-07-17 02:13| 来源: 网络整理| 查看: 265

一、开发环境安装 1、正常安装（在root模式下）

　　1、安装nodejs

apt install nodejs

　　2、检查nodejs是否安装成功

nodejs -v #会出现版本情况，如：v10.19.0

　　3、安装npm

apt install npm

　　4、检查npm是否安装成功

npm -v #正常出现版本，如：7.11.2

　　5、升级npm与安装cnpm

#升级 npm cnpm install npm -g #安装具体版本的npm cnpm install [email protected] -g #-g为全局安装的意思 #安装 cnpm npm install cnpm -g

　　6、安装Vue

sudo cnpm install -g vue-cli

　　7、查看Vue是否安装成功

vue -V #类似结果：2.9.6

　　8、其他教程参考

https://www.cnblogs.com/leemamas/p/13028988.html

https://www.pianshen.com/article/766523200/

https://www.runoob.com/vue3/vue3-install.html

2、创建项目

　　1、Vue方式

vue init webpack vue-test #出现的提示，默认按回车和输入y进行确人就可

　　2、安装vite,用vite来创建项目

cnpm i -g create-vite-app #安装vite create-vite-app test #创建项目test 3、启动项目 npm install npm run dev #正常运行如下

在这里插入图片描述

4、常见问题

　　1、Vue安装npm install 错误在这里插入图片描述

#清楚npm缓存，然后重新安装npm install npm cache clean --force

　　2、进错文件夹，一定是你建立的那个项目文件

　　3、权限不足，如果是在root模式下创建的项目，在使用vscode开发修改时，会提示权限不足，每次要求输入root密码，可以将用户升级为管理员，在管理员情况下进行开发（在环境安装前设置），或者将文件的所属者与所属组进行修改。

将普通用户升级为root用户

vim /etc/passwd #找到自己的用户，将后面的数字改为0 与 0 就是与第一个用户root那个0 0一样

修改文件的所属者

chown -R 用户 /tmp/testfile #更改文件及其子文件的所属者属性

修改文件的所属组

chgrp -R 组名 /tmp/testfile #更改文件及其子文件的所属组属性二、Vscode安装（应用商店安装）

在这里插入图片描述

【本文地址】

今日新闻