ipt

项目代码以上传至码云项目地址https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold

文章目录

安装postcss、sass、autoprefixer、tailwindcss和uni-helper/vite-plugin-uni-tailwind以及相关依赖3.4.2

创建配置文件postcss.config.js和tailwind.config.js3.4.2.1

创建配置文件3.4.2.2

近日心血来潮想做一个开源项目目标是做一款可以适配多端、功能完备的模板工程包含后台管理系统和前台系统开发者基于此项目进行裁剪和扩展来完成自己的功能开发。

但前台系统花样繁多可能是PC端浏览器可能是微信网页微信小程序安卓鸿蒙……因此笔者只能从个人的开发需求出发搭建了原生vue3版、原生微信小程序版、原生React版和uniapp版的前台系统模板。

创建uniapp项目可以使用官方提供的IDE工具HBuilderX可视化的创建但项目结构与普通的vue项目有所不同而使用命令行方式创建的项目是传统的node项目结构。

工程代码在src下。

这样的项目结构更符合笔者的开发习惯。

本文内容主要就是来介绍使用命令行方式搭建uniapp版的前台系统模板工程的完整过程。

二、脚手架技术栈简介

开发所有前端应用的框架开发者编写一套代码可发布到iOS、Android、Web响应式、以及各种小程序微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝、快应用等多个平台。

uniapp官方文档https://uniapp.dcloud.net.cn/

2.2

是一个流行的开源JavaScript框架用于构建用户界面和单页面应用。

Vue

3与Vue

3引入了新的组合式API它提供了更灵活的代码组织方式。

性能Vue

3提供了更好的性能包括更快的渲染速度和更小的打包大小。

TypeScriptVue

2.3

JavaScript的基础上增加了静态类型、类和接口等特性从而将其提升为一个功能更为丰富的开发平台。

TypeScript

TypeScript

Typescript官网文档https://www.typescriptlang.org/

2.4

这对于单页应用程序来说是正确的但如果它是服务器端呈现的会使您的应用程序暴露于安全漏洞。

Pinia

Pinia官方文档https://pinia.web3doc.top/

2.5

Tailwind是一个原子类方式命名的CSS工具集。

Tailwind

CSS

这样的的类它们能直接在脚本标记语言中组合起来构建出任何设计。

它将所有的css属性全部封装成语义化的类比如你想要一个float:left它已经帮你封装好了你直接使用一个float-left就可以。

需要一个宽度为12像素只需要写w-3就可以。

使用tailwindcss极大的减少代码量能轻松完成响应式设计不需要再写单独的css也不需要再为class取个什么名字而苦恼。

tailwindcss官方文档https://tailwindcss.com/

2.6

说到uv-ui就不得不先从uni-ui和uView说起。

uni-ui、uView和uv-ui都是uni-app生态下专用的组件库。

uni-ui

是DCloud官方提供的跨端ui库它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui官方文档https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html

uView从2018年初发布以来是uni-app生态最优秀的UI框架全面的组件和便捷的工具会让您信手拈来如鱼得水。

uView2.0全面兼容了uni-app生态下的nvue开发模式对1.x进行了架构重构细节和性能都有极大提升。

但uView是基于vue2实现在vue3框架下使用会存在诸多问题。

uv-ui是兼容vue32、nvue、app、h5、多端小程序的uni-app生态框架大部分组件基于uView2.x在经过改进后全面支持vue3部分组件做了进一步的优化支持单独导入方便开发者选择导入需要的组件。

2.7

Vite是Vue的作者尤雨溪开发的Web开发构建工具它是一个基于浏览器原生ES模块导入的开发服务器在开发环境下利用浏览器去解析import在服务器端按需编译返回完全跳过了打包这个概念服务器随启随用。

同时不仅对Vue文件提供了支持还支持热更新而且热更新的速度不会随着模块增多而变慢。

Vue3默认使用Vite作为项目脚手架工具。

三、详细步骤

-v命令查看当前node版本如果不符合要求请先升级Nodejs。

3.2

dcloudio/uni-preset-vue#vite-ts

uniapp-vue3-ts-scaffold项目创建成功后执行以下命令安装npm依赖。

npm

--registryhttps://registry.npmmirror.com

yarn

dev:mp-weixin项目创建过程中遇到问题可参考官方文档https://uniapp.dcloud.net.cn/quickstart-cli.html#clidiff

3.3

--registryhttps://registry.npmmirror.com

pinia2.0.33

createSSRApp(App);app.use(Pinia.createPinia());return

{app,Pinia,

以下代码template中使用的view、image、text元素是uniapp内置元素因为uniapp要兼容浏览器、小程序和app等多种环境不建议在uniapp中直接使用浏览器所支持的div、span等元素也不建议在uniapp项目中使用window、document、navigator等只有浏览器支持的API。

templateview!--

useCounterStore();counter.count//

自动补全

安装postcss、sass、autoprefixer、tailwindcss和uni-helper/vite-plugin-uni-tailwind以及相关依赖

Sass

Compass有助于更好地组织管理样式文件以及更高效地开发项目。

autoprefixer是一款自动管理浏览器前缀的插件它可以解析CSS文件并且添加浏览器前缀到CSS内容里使用Can

Usecaniuse网站的数据来决定哪些前缀是需要的。

把autoprefixe添加到资源构建工具例如Grunt后可以完全忘记有关CSS前缀的东西只需按照最新的W3C规范来正常书写CSS即可。

如果项目需要支持旧版浏览器可修改browsers参数设置

。

uni-helper/vite-plugin-uni-tailwind支持在

uni-app

--registryhttps://registry.npmmirror.com

--save-dev

uni-helper/vite-plugin-uni-tailwind

autoprefixer

uni-helper/vite-plugin-uni-tailwind

autoprefixer

uni-helper/vite-plugin-uni-tailwind

autoprefixer

创建配置文件postcss.config.js和tailwind.config.js

3.4.2.1

使用命令行可以自动创建postcss.config.js和tailwind.config.js配置文件也可以手动创建。

npx

./src/**/*.{vue,js,ts,jsx,tsx}],//

兼容小程序将

在postcss配置中主动添加tailwindcss配置文件。

const

require(postcss-import);module.exports

{parser:

path.resolve(process.env.UNI_INPUT_DIR,

id.substr(3));}

path.resolve(process.env.UNI_INPUT_DIR,

id.substr(2));}

path.resolve(process.env.UNI_INPUT_DIR,

./tailwind.config.js,}),autoprefixer({remove:

true,}),],

uni-helper/vite-plugin-uni-tailwind//

export

配置完成后需要引入tailwindcss注意不要在main.ts中引入这会导致APP端不生效需要在App.vue中引入这一点上与原生Vue有所区别。

修改src/App.vue内容如下

/template以上代码定义了一个宽度100%高度100px背景是红色使用flex布局垂直方向和水平方向内容都居中的区域区域中有一个文本元素显示Hello

Tailwind

插件市场下载入口https://ext.dcloud.net.cn/plugin?nameuv-ui

Hbuilder

进行一键升级右键uni_modules目录或右键某组件均可进行一键升级。

在uni-app插件市场右上角选择

X。

下载安装uv-ui还需要观看广告如果介意可使用其他方式安装。

安装成功后会在src目录下内容都是uv-ui的组件可以在代码中直接使用。

3.5.2

/template以上代码就是在view中添加了一个uv-ui组件库的按钮。

四、总结

在本文中介绍了基于命令行方式搭建一个uniapp工程脚手架的完整过程希望本文能对您有所帮助。

项目代码以上传至码云项目地址https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold