Ubuntu20.04VueJs+NodeJs development environment deployment

1. Development environment installation

1. Normal installation (in root mode)

  1. Install nodejs

		apt install nodejs

  2. Check whether nodejs is installed successfully

		nodejs -v  #会出现版本情况,如:v10.19.0

  3. Install npm

		apt install npm

  4. Check whether npm is installed successfully

		npm -v #正常出现版本,如:7.11.2

  5. Upgrade npm and install cnpm

		#升级 npm
		cnpm install npm -g  
		#安装具体版本的npm 
		cnpm install npm@7.11.2 -g  #-g为全局安装的意思
		#安装 cnpm
		npm install cnpm -g

  6. Install Vue

		sudo cnpm install -g vue-cli

  7. Check whether Vue is installed successfully

		vue -V  #类似结果:2.9.6

  8. Reference to other tutorials

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

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

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

2. Create a project

  1. Vue method

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

  2. Install vite and use vite to create projects

		 cnpm i -g create-vite-app  #安装vite
		 create-vite-app test  #创建项目test

3. Start the project

		npm install
		npm run dev  #正常运行如下

Insert image description here
Insert image description here

4. Frequently Asked Questions

  1. Vue installation npm install error
Insert image description here

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

  2. Enter the wrong folder. It must be the project file you created.

  3. Insufficient permissions. If the project is created in root mode, when using vscode to develop and modify, it will prompt that the permissions are insufficient. Every time you are asked to enter the root password, you can upgrade the user to an administrator and develop under the administrator's condition ( Set before environment installation), or modify the owner and group of the file.

Upgrade ordinary user to root user

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

Change file owner

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

Modify the group to which a file belongs

chgrp  -R 组名  /tmp/testfile  #更改文件及其子文件的所属组属性

2. Vscode installation (app store installation)

Insert image description here
Insert image description here

Guess you like

Origin blog.csdn.net/weixin_44839457/article/details/116353668