搭建一个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

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

相关推荐
LuckySusu2 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
LuckySusu11 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu11 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu12 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
LuckySusu15 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
今天头发还在吗28 分钟前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
小蜗子1 小时前
vscode 侧边文件夹名字体大一点
ide·vscode·编辑器
铅笔侠_小龙虾1 小时前
深入理解 Vue.js 原理
前端·javascript·vue.js
你的眼睛會笑1 小时前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
HIT_Weston1 小时前
149、【OS】【Nuttx】【周边】效果呈现方案解析:VSCode 打开外部链接(二)
vscode·os·nuttx·文档渲染