模板工程搭建:Vue-Cli搭建Vue3/TS/uni-app小程序工程(下)
前言
前两期:
已经搭建了一个包含了Vue3
,TS
,Sass
,Vant Weapp
,Vuex4
,Axios
,Eslint
等特性的uni-vue3-ts工程化模板
本节将为模板接入更多的特性:
- less
- tailwindcss
less
模板默认是没有支持less的
安装less-loader
与less
即可
需要指定版本,版本过高不支持低版本的webpack也无法顺利运行
sh
yarn add less-loader@^7 less@^3.13.1 --dev
yarn add less-loader@^7 less@^3.13.1 --dev
tailwindcss
直接在 HTML 进行编写class即可实现页面样式生成
也就是前段时间刚出来时,社区讨论很激烈的一个东西
个人是不太喜欢这个东西,会导致样式与页面内容耦合度过高,仿佛回到了bootstrap时代
emm但如果拿来写一些简单的示例demo还是可以
优势就是对于不复杂的组价能直观的看到标签对应的最终样式,不用去样式文件中检索查看
下面介绍一下在uni-app中使用,咱根据文档摸索前进
安装依赖
- tailwindcss
- postcss
- autoprefixer
- postcss-class-rename
sh
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 postcss-class-rename --dev
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 postcss-class-rename --dev
依赖安装完后就简单配置一下
配置
根目录下创建tailwind.config.js
文件,兼容小程序部分的配置来源于文末的参考资料
js
module.exports = {
purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
separator: '__', // 兼容小程序,将 : 替换成 __
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
corePlugins: {
// 兼容小程序,将带有 * 选择器的插件禁用
preflight: false,
space: false,
divideColor: false,
divideOpacity: false,
divideStyle: false,
divideWidth: false,
},
};
module.exports = {
purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
separator: '__', // 兼容小程序,将 : 替换成 __
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
corePlugins: {
// 兼容小程序,将带有 * 选择器的插件禁用
preflight: false,
space: false,
divideColor: false,
divideOpacity: false,
divideStyle: false,
divideWidth: false,
},
};
修改postcss.config.js
文件内容,最终配置如下
js
const path = require('path');
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3));
}
if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2));
}
if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1));
}
return id;
},
}),
// 新增
require('tailwindcss'),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5',
}),
// 新增
require('postcss-class-rename')({
'\\\\.': '_', // 兼容小程序,将类名带 .和/ 替换成 _
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),
],
};
const path = require('path');
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3));
}
if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2));
}
if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1));
}
return id;
},
}),
// 新增
require('tailwindcss'),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5',
}),
// 新增
require('postcss-class-rename')({
'\\\\.': '_', // 兼容小程序,将类名带 .和/ 替换成 _
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),
],
};
在 App.vue中加入引入 tailwindcss
的代码
html
<style>
/* tailwindcss */
@import 'tailwindcss/tailwind.css';
</style>
<style>
/* tailwindcss */
@import 'tailwindcss/tailwind.css';
</style>
页面中使用
这里参考文档用了几个简单的属性
html
<view>
<text class="text-xl font-bold text-red-500">tailwindcss</text>
</view>
<view>
<text class="text-xl font-bold text-red-500">tailwindcss</text>
</view>
渲染结果如下
最后
到这一个包含了常见特性的uni-app 开发小程序的工程化模板就算结束了,如果还要有推荐的特性欢迎评论交流