Ubuntu 20.04.6使用vscode从0开始搭建uniapp

因为由于HBuilderX 支持的Ubuntu不是可视化窗口是敲命令的，所有逼迫使用 vsc也就是Visual Studio Code（vscode）vsccode

1.下载安装

https://code.visualstudio.com/Download 下载的路径

这里我们选择.deb的安装方式因为如果你的不支持你就用.rpm，最推荐的是如果可以使用.deb就使用这个，下载成功了之后到下载的目录执行这个命令

    安装 sudo dpkg -i 安装.deb文件卸载    sudo dpkg -r 安装.deb文件

就比如我的 这里替换你的当前版本就行

 sudo dpkg -i code_1.105.1-1760482543_amd64.deb

2.第二步打开下载好的vsc

砸门先装一个中文版本的插件

第5个就是要装插件他的英文名字是 Extensions 也可以快捷键打开Ctrl+Shift+X 的然后在那个输入框里面搜索 Chinese 第一个就是然后点击那个Install等待安装

然后大退重新进去这个vsc就是中文了接下来就开始我们的正规话题了

3.开始下载npm

点击这个就可以打开控制台也就是终端然后

然后就开始执行命令安装Node.js,这里我们需要去到系统自带的终端，因为vsc里面使用不了sudo的命令，没权限

等待sudo apt install -y nodejs npm 这个的安装

sudo apt update
sudo apt install -y nodejs npm

然后执行 npm -v  node -v验证是否安装成功

node -v
npm -v

然后现在nodejs就可以开始创建项目了,这里记住nodejs的版本不能太低了不然会创不了项目

如果你安装了比较低的这里教你如何卸载重新安装，执行命令，这里需要去到系统的终端

sudo apt remove nodejs npm -y

这个是官网的命令跟着来就行 https://nodejs.org/zh-cn/download，这个是我执行的命令，如果简单官网这个命令慢也可以试试清华的，第一个是我，第二个是清华的镜像

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
nvm install 20

curl -o- https://mirror.ghproxy.com/https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

4.创建uniapp

我们回到vsc的终端执行命令

# 全局安装 vue-cli
npm install -g @vue/cli# 安装 DCloud 的脚手架插件
npm install -g @dcloudio/uni-app# 创建项目（选择默认模板）
vue create -p dcloudio/uni-preset-vue my-uniapp

执行 npm install -g @vue/cli

然后执行命令 vue --version验证是否安装成功如果有版本号输出说明成功

然后执行 npm install -g @dcloudio/uni-app

然后就可以创建我们的项目了所以环境都准备好了然后执行 

vue create -p dcloudio/uni-preset-vue my-uniapp

会有一个这样的弹框

? Your connection to the default npm registry seems to be slow. Use https://registry.npmmirror.com for faster installation? (Y/n)

别犹豫，那不是陷阱，是 npm 在体贴你。
https://registry.npmmirror.com 是国内镜像（前身是淘宝镜像），比官方的 registry.npmjs.org 快得多、稳定得多。

你选 Y 之后，它会自动用这个镜像地址安装依赖，速度起飞，不用你手动改配置。

如果你非得体验龟速下载，也可以选 n，然后看着 npm 一边卡一边吐红字。这里选择了一次就行了

然后就会显示一个这样的

这里的模版我们选择新闻的玩玩这个是键盘的 ↑ ↓ ← → 的选择然后回车，接下来就等待

安装成功了,接下来就执行npm run serve这个就可以了不要在当前目录下执行不然会这样，要去到 我们创建的目录里面去

  cd my-uniappnpm run serve

这里就成功了可以通过浏览器访问，ok没问题如果想打包成其他的访问方式可以执行以下命令

5.编译成微信小程序

如果想编译成小程序的话先安装依赖，有的模板已经装了，如果命令秒过，不用担心。

npm install @dcloudio/uni-mp-weixin --save

安装好了然后就执行微信小程序的编译

npm run dev:mp-weixin

这里也就成功了接下来具体就不多说了，因为比较简单就是把生成的文件导入到微信开发者工具打开，就可以用了提前的有微信小程序开发者账号的人

第5.2编译成app

先说重点

App 版本 不能 直接在 VS Code 里打包，得靠 HBuilderX。
VS Code 只是写代码的，打包 App 得用 HBuilderX 的原生引擎（它帮你搞定底层编译、签名和插件集成）。

完整的命令是 运行项目（开发环境）

npm run dev:h5        # 运行到浏览器
npm run dev:mp-weixin # 运行到微信小程序
npm run dev:app       # 运行到 App 模拟器（需要 HBuilderX 支持）

打包编译（生产环境）

npm run build:h5
npm run build:mp-weixin
npm run build:app

• H5：VS Code 自带调试工具或 Chrome 调试。

• 微信小程序：打开微信开发者工具，选择 /dist/build/mp-weixin/。

• App：HBuilderX → 运行 → 运行到手机或模拟器

  ---

  第6 uniapp的插件

• uniapp-snippets （可选，方便写模板）
• 
• 这个是一个代码提示的小插件 ，快速生成 uni.navigateTo、uni.request 等代码片段 极大提速
• Vue

• 插件名	用途	说明

  uni-helper

  官方推荐的全家桶支持（包含 nvue）

  自动识别 .nvue、补全 uni.* API、plus.* 对象、组件属性

  uniapp-snippets

  快速生成 nvue 常用组件模板

  写 <list>、<cell> 时不再靠记忆

• 
• 
• 是不是简单没有高亮太不好看了把他们的插件装好了还需要配置一下
• 去到my-uniapp/这个目录新建一个 .vscode/settings.json
• 
• 然后把配置添加进去现在是不是看着好多了，至于报错的话不用管应该是我的插件语法要求太严格了
• 
• 配置如下

• {// 语言关联：让 .nvue 被识别为 Vue 文件"files.associations": {"*.nvue": "vue"},"files.defaultLanguage": "vue",// 各语言默认格式化器"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[nvue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// 保存时自动格式化 & 自动修复 ESLint 错误"editor.formatOnSave": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// 启用 ESLint 对 JS/Vue/nvue 检查"eslint.validate": ["javascript", "vue", "nvue"],// 禁用 StandardJS，防止冲突"standard.enable": false,// Volar 相关特性（如果装了）"vue.features.codeActions": true,"vue.features.diagnostics": true,"vue.features.formatting": true,// 路径补全支持 @ 指向 src/"path-intellisense.mappings": {"@": "${workspaceFolder}/src"},// Prettier 规则"prettier.singleQuote": true,"prettier.semi": false,"prettier.trailingComma": "none",// 视觉辅助"editor.bracketPairColorization.enabled": true,"html.autoClosingTags": true,"html.autoClosingQuotes": true,// 如果你意外装了 Vetur，就让它彻底闭嘴"vetur.validation.template": false,"vetur.validation.script": false,"vetur.validation.style": false
  }
  

  

• 这些插件都是我针对这个uniapp下载的,那个爆红的需要到 .vscode/settings.json 文件里面再加一个2个配置，这样就不会了

•   "typescript.validate.enable": false,
  "javascript.validate.enable": false

  

• 还需要什么插件自己可以去找一找

  ---

  文章到现在结束了