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

一、开发环境安装

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 npm@7.11.2 -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安装（应用商店安装）