[uniapp]DeepinV23下vscode开发uniapp小程序的步骤

2024-08-20 17:00:00 by wst

小程序

---

uniapp的好处是一套代码可以编译成多端，省时省力。

对于习惯Linux环境的老铁，windows确实用不习惯，这里推广一波Deepin，最新版本是V23。

下面我们来说一下在deepin中怎么开发小程序：

一、安装nvm

1. 为了对node版本进行管理，这里我们安装nvm；
2. 下载安装脚本，下载地址为：

https://github.com/nvm-sh/nvm/blob/master/install.sh

3. 执行脚本：

bash install.sh

二、安装vue

1.设置安装源

npm config set registry http://registry.npm.taobao.org

2.安装vue（这个时间可能回比较久，请耐心等待）

# 先安装node
nvm install node
# 然后安装vue
npm install -g @vue/cli

三、创建uniapp项目

1. 执行命令（任选其一）：

# my-uniapp为你的项目名称，vue2版本
vue create -p dcloudio/uni-preset-vue my-uniapp
# my-demo为项目名称，vue3版本
npx degit dcloudio/uni-preset-vue#vite my-demo
cd my-demo && npm install

2. 选择模板：hello uniapp，注意这个模板是不能编译成小程序的，因为里面的部分vue3代码不被支持。如果想编译成小程序，选默认模板。

四、构建为微信小程序

1. 执行命令:npm run serve, 大概看看有没有问题；
2. 构建项目，执行：

npm run build:mp-weixin

3. 调试项目

npm run dev:mp-weixin

五、预览小程序

1. 打开“微信开发者工具”，导入刚才生成的项目：dist/dev/mp-weixin，如果没有appid,可以选择用测试appid。
2. 打开开发者工具的“设置”--》“安全设置”--》“安全”--》“服务端口”，设置为打开状态，同时把其他状态也打开。

3. 重新点击“编译”

六、在vscode中开发

（记得关闭自动保存功能）当保存的时候，微信开发者工具中的内容会自动更新；

如果要在vue文件中支持scss，请安装以下插件(记得在sytle标签中加入lang="scss")：

npm install sass
npm install sass-loader

安装uini-ui组件：

npm install @dcloudio/uni-ui

启用uni-ui组件：

// pages.json
{
  // 组件自动导入
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置  // [!code ++]
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" // [!code ++]
    }
  },
  "pages": [
    // …省略
  ]
}

举例，表格的使用：

https://uniapp.dcloud.net.cn/component/uniui/uni-table.html

总结

以上就是在Linux下开发微信小程序的步骤，如果问题欢迎留言。

---