深耕数码、AI兴趣领域
8
16
用Nas搭建vscode代码编辑器，超硬核教程
2022-10-09 17:50:28
33点赞
219收藏
18评论
该篇教程主要讲解vscode server的安装和简单使用
vscode：这个就不过多介绍，大部分程序员都会用到的代码编辑器。
主要流程目录：
1.安装
2.使用
3.扩展
3.1.简单html
3.2.Vue3安装
1.安装
去到应用商店“APPS”，搜索“vscode server”
这里我选“ahmadnassri”的进行安装
名称太长可以改一下
按实际情况修改
点开隐藏，按实际情况修改PUID和PGID
Tip：
如果搭建办公，建议提前映射下面几个端口“8080”，“52330”
都没问题点击安装
如果WebUI界面还没加载，点击查看日志
可以看到有东西在下载，需要等下载完成（下载卡死，可以重启docker）
下载完成会提示打开WebUI
2.使用
和本地安装的Visual Studio Code不能说相识，只能说一模一样（不知道有没有注意到，这个自带就是中文的）
切换颜色主题（习惯用黑色主题）
这里重点说一下，设置这里除非你会，否则不要乱设置
这里是安装插件的
3.扩展
避免小白一时兴奋安装了vscode不会使用，这里演示一下编译器的简单使用，不对的地方轻喷。
这里也可以跟着“开始”的教程一步步来
3.1.简单html
实操演示写一个简单的html网页（hello world）
打开“资源管理器”，点击“打开文件夹”
选择存放项目的工作目录“/projects”
创建一个文件夹(HtmlTest)，用来存放文件
创建一个html文件(test.html)
可以看到右边就可以愉快写代码了
参考填写
<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
</head>
<body> hello world</body>
</html>
写完html页面，运行前还需要装一个插件，商店搜索“open in browser”，点击安装
安装完成
回到html这里，鼠标右键多了一个“open in default browser”选项，点击
跳转打开到另外一个页面（页面IP很明显不对）
改成正确IP，还是不行（因为还没设置端口映射）
编辑
设置映射端口52330
回到html重新右键打开，改IP，就可以正常显示写的html页面
3.2.Vue3安装
下面这个属于vue3详细搭建步骤，需要的可以看看。
检测npm是否有安装（显示没有安装）
npm -v
到这里找要的nodejs版本
这里我安装当前最新版本 node-v18.9.1-linux-x64.tar.xz，注意只是复制下载网址，不用点击下载
回到vscode终端，参考输入（键盘用Ctrl+V才能粘贴进去），下载安装包
wget https://nodejs.org/dist/v18.9.1/node-v18.9.1-linux-x64.tar.xz
解压，参考输入（注意名称别错了）tar -xf node-v18.9.1-linux-x64.tar.xz
放入指定的目录（注意名称别错了）mv node-v18.9.1-linux-x64 /usr/local/node
建立软链接
cd /usr/bin
ln -s /usr/local/node/bin/node node
ln -s /usr/local/node/bin/npm npm
配置淘宝镜像
npm config set registry https://registry.npmmirror.com/
查看是否切换成功（这里显示已经切换成功）
npm config get registry
检测npm是否安装成功
npm -v
检测node是否安装成功
node -v
安装vue.js
npm install vue -g
安装webpack模板
npm install webpack -g
npm install webpack-cli -g
建立软链接
cd /usr/bin
ln -s /usr/local/node/bin/webpack webpack
检测webpack是否安装成功
webpack -v
安装脚手架vue-cli
npm install vue-cli -g
建立软链接cd /usr/bin
ln -s /usr/local/node/bin/vue vue
检测vue是否安装成功
vue -V
卸载脚手架（发现安装错vue2了，需要vue2的可以不用卸载）
npm uninstall vue-cli -g
安装vue3
npm install -g @vue/cli
查看安装版本
vue -V
创建一个vue3项目
回到我们项目目录（红色那个node压缩包可以删掉）
cd /projects
创建一个vue3项目
vue create vue3_test
选择vue3默认（一般真正使用选第3项自定义）
自动就创建好了
启动项目
cd vue3_test
npm run serve
启动成功了（但是还需要去映射端口）
映射8080端口
9001
回来发现之前安装了的都不行了，重新又安装了一次
重新启动服务，打开网页就可以看见vue模板的页面了
回到编辑器，可以安装vue插件（因为页面没有高亮显示）
安装完插件，效果不错的
好了，可以愉快打代码了！
作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～
snipergg
为什么要用这个方法？
校验提示文案
修车的黑马胖子
校验提示文案
值友8807665094
校验提示文案
值友2729332624
校验提示文案
cosz
校验提示文案
陈德深
校验提示文案
西北望天狼
校验提示文案
希文大叔
校验提示文案
[已注销]
校验提示文案
值友8812707636
校验提示文案
值友8812707636
校验提示文案
[已注销]
校验提示文案
希文大叔
校验提示文案
snipergg
为什么要用这个方法？
校验提示文案
cosz
校验提示文案
值友2729332624
校验提示文案
值友8807665094
校验提示文案
西北望天狼
校验提示文案
陈德深
校验提示文案
修车的黑马胖子
校验提示文案