搭建一个vscode+uni+vue的小程序项目

我们使用 vue2 创建工程作为示例,uni-app中Vue2版的组件库和插件也比较多,稳定、问题少,可以先参考下官方文档:uni-app官网

既然是使用vue脚手架,那肯定要全局安装@vue/cli,已安装的可以跳过。

注意 :Vue2创建的项目,脚手架版本要用@4的版本,用@5的版本运行项目会报错,这里推荐 @4.5.15

复制代码
npm install -g @vue/cli@4.5.15

创建项目,后面是你的项目名字。

复制代码
vue create -p dcloudio/uni-preset-vue 项目名称

这里我们选择默认模板

在VSCode打开这个项目,可以看看整个项目项目结构,src下项目结构跟HbuilderX创建的根目录基本一样,说明两种项目转换还是比较方便的。

tsconfig.json报错问题

目前通过vue-cli命令行创建的项目已经不再只是tsconfig.json,只有是使用ts的项目才会是tsconfig.json,否则会是jsconfig.json。所以这个问题已经不存在了。

增强pages.json和manifest.json开发体验

json文件写注释

我们打开pages.jsonmanifest.json,发现会报红,这是因为在json中是不能写注释的,而在jsonc是可以写注释的。

解决方案 :我们把pages.jsonmanifest.json这两个文件关联到jsonc中,然后就以写注释了。在设置中打开settings.json,添加:

安装以下插件辅助开发

组件提示

接下来就是组件语法提示,如<view><button>等uni-app原生组件,这个需要我们手动安装对应的依赖包。

复制代码
npm i @dcloudio/uni-helper-json

如果是vue3,就不使用上面这个命令,而是下面这个

复制代码
npm i -D uni-app-types

然后在tsconfig.jsonorjsconfig.json配置compilerOptions.typesvueCompilerOptions,确保include 包含了对应的 vue 文件。

复制代码
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["@dcloudio/types", "uni-app-types"]
  },
 "vueCompilerOptions": {
    "experimentalRuntimeMode": "runtime-uni-app"
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

如果你要使用uniCloud、uni-ui等,可以安装 uni-cloud-typesuni-ui-types

还有其他的可以去https://github.com/ModyQyW/uni-helper/tree/main/packages/uni-ui-types

注意cli 创建的uni-app项目,跟web项目一样,需要安装对应的sass模块,才能写scss。安装sass-loader,建议版本@10,否则可能会导致vue与sass的兼容问题而报错。

复制代码
npm i sass sass-loader@10 -D

运行、发布项目

复制代码
npm run dev:mp-weixin

将打包后的dist文件夹中的mp-weixin

用微信小程序开发者工具打开

相关推荐
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
说私域5 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷5 小时前
第一个小程序
小程序
春哥的研究所5 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统