Skip to content

T
test
Commit bb64adb1 by zhuxichen
Options

chore: update tailwind

parent ac9b1aa6
Showing with 199 additions and 131 deletions
config/index.ts
import Components from 'unplugin-vue-components/webpack';
import NutUIResolver from '@nutui/nutui-taro/dist/resolver';
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack');
const config = {
projectName: 'testApp',
date: '2024-1-31',
designWidth (input) {
designWidth(input) {
if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
return 375
return 375;
}
return 750
return 750;
},
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2,
375: 2 / 1
375: 2 / 1,
},
sourceRoot: 'src',
outputRoot: 'dist',
plugins: ['@tarojs/plugin-html'],
defineConstants: {
},
defineConstants: {},
copy: {
patterns: [
],
options: {
}
patterns: [],
options: {},
},
framework: 'vue3',
compiler: {
type: 'webpack5',
prebundle: { enable: false }
prebundle: { enable: false },
},
sass:{
data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`
sass: {
data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`,
},
mini: {
webpackChain(chain) {
chain.plugin('unplugin-vue-components').use(Components({
resolvers: [NutUIResolver({taro: true})]
}))
chain.plugin('unplugin-vue-components').use(
Components({
resolvers: [NutUIResolver({ taro: true })],
})
);
chain.merge({
plugin: {
install: {
plugin: UnifiedWebpackPluginV5,
args: [
{
appType: 'taro',
},
],
},
},
});
},
postcss: {
pxtransform: {
enable: true,
config: {
// selectorBlackList: ['nut-']
}
},
},
url: {
enable: true,
config: {
limit: 1024 // 设定转换尺寸上限
}
limit: 1024, // 设定转换尺寸上限
},
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
generateScopedName: '[name]__[local]___[hash:base64:5]',
},
},
htmltransform: {
enable: true,
// 设置成 false 表示 不去除 * 相关的选择器区块
// 假如开启这个配置，它会把 tailwindcss 整个 css var 的区域块直接去除掉
config: {
removeCursorStyle: false,
},
},
},
},
h5: {
webpackChain(chain) {
chain.plugin('unplugin-vue-components').use(Components({
resolvers: [NutUIResolver({taro: true})]
}))
chain.plugin('unplugin-vue-components').use(
Components({
resolvers: [NutUIResolver({ taro: true })],
})
);
},
publicPath: '/',
staticDirectory: 'static',
......@@ -75,23 +96,22 @@ const config = {
postcss: {
autoprefixer: {
enable: true,
config: {
}
config: {},
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
}
generateScopedName: '[name]__[local]___[hash:base64:5]',
},
},
},
},
};
module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'))
return merge({}, config, require('./dev'));
}
return merge({}, config, require('./prod'))
}
return merge({}, config, require('./prod'));
};
package.json
{
"name": "testApp",
"version": "1.0.0",
"private": true,
"description": "11",
"templateInfo": {
"name": "vue3-NutUI4",
"typescript": true,
"css": "Stylus",
"framework": "Vue3"
},
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
},
"browserslist": [
"last 3 versions",
"Android >= 4.1",
"ios >= 8"
],
"author": "",
"dependencies": {
"@babel/runtime": "^7.7.7",
"@nutui/icons-vue-taro": "^0.0.9",
"@nutui/nutui-taro": "^4.2.9",
"@tarojs/components": "3.6.23",
"@tarojs/helper": "3.6.23",
"@tarojs/plugin-framework-vue3": "3.6.23",
"@tarojs/plugin-html": "3.6.23",
"@tarojs/plugin-platform-alipay": "3.6.23",
"@tarojs/plugin-platform-h5": "3.6.23",
"@tarojs/plugin-platform-jd": "3.6.23",
"@tarojs/plugin-platform-qq": "3.6.23",
"@tarojs/plugin-platform-swan": "3.6.23",
"@tarojs/plugin-platform-tt": "3.6.23",
"@tarojs/plugin-platform-weapp": "3.6.23",
"@tarojs/runtime": "3.6.23",
"@tarojs/shared": "3.6.23",
"@tarojs/taro": "3.6.23",
"vue": "^3.2.40"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@tarojs/cli": "3.6.23",
"@tarojs/taro-loader": "3.6.23",
"@tarojs/webpack5-runner": "3.6.23",
"@types/node": "^18.15.11",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"@vue/babel-plugin-jsx": "^1.0.6",
"@vue/compiler-sfc": "^3.2.40",
"babel-preset-taro": "3.6.23",
"css-loader": "3.4.2",
"eslint": "^8.12.0",
"eslint-config-taro": "3.6.23",
"eslint-plugin-vue": "^8.0.0",
"style-loader": "1.3.0",
"stylelint": "9.3.0",
"ts-node": "^10.9.1",
"typescript": "^4.1.0",
"unplugin-vue-components": "^0.23.0",
"vue-loader": "^17.0.0",
"webpack": "^5.78.0"
}
}
"name": "testApp",
"version": "1.0.0",
"private": true,
"description": "11",
"templateInfo": {
"name": "vue3-NutUI4",
"typescript": true,
"css": "Stylus",
"framework": "Vue3"
},
"scripts": {
"postinstall": "weapp-tw patch",
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
},
"browserslist": [
"last 3 versions",
"Android >= 4.1",
"ios >= 8"
],
"author": "",
"dependencies": {
"@babel/runtime": "^7.7.7",
"@nutui/icons-vue-taro": "^0.0.9",
"@nutui/nutui-taro": "^4.2.9",
"@tarojs/components": "3.6.23",
"@tarojs/helper": "3.6.23",
"@tarojs/plugin-framework-vue3": "3.6.23",
"@tarojs/plugin-html": "3.6.23",
"@tarojs/plugin-platform-alipay": "3.6.23",
"@tarojs/plugin-platform-h5": "3.6.23",
"@tarojs/plugin-platform-jd": "3.6.23",
"@tarojs/plugin-platform-qq": "3.6.23",
"@tarojs/plugin-platform-swan": "3.6.23",
"@tarojs/plugin-platform-tt": "3.6.23",
"@tarojs/plugin-platform-weapp": "3.6.23",
"@tarojs/runtime": "3.6.23",
"@tarojs/shared": "3.6.23",
"@tarojs/taro": "3.6.23",
"vue": "^3.2.40",
"weapp-tailwindcss": "^3.0.8"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@tarojs/cli": "3.6.23",
"@tarojs/taro-loader": "3.6.23",
"@tarojs/webpack5-runner": "3.6.23",
"@types/node": "^18.15.11",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"@vue/babel-plugin-jsx": "^1.0.6",
"@vue/compiler-sfc": "^3.2.40",
"autoprefixer": "^10.4.17",
"babel-preset-taro": "3.6.23",
"css-loader": "3.4.2",
"eslint": "^8.12.0",
"eslint-config-taro": "3.6.23",
"eslint-plugin-vue": "^8.0.0",
"postcss": "^8.4.33",
"postcss-rem-to-responsive-pixel": "^6.0.1",
"style-loader": "1.3.0",
"stylelint": "9.3.0",
"tailwindcss": "^3.4.1",
"ts-node": "^10.9.1",
"typescript": "^4.1.0",
"unplugin-vue-components": "^0.23.0",
"vue-loader": "^17.0.0",
"webpack": "^5.78.0"
}
}
\ No newline at end of file
postcss.config.js 0 → 100644
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-rem-to-responsive-pixel': {
// 32 意味着 1rem = 32rpx
rootValue: 16,
// 默认所有属性都转化
propList: ['*'],
// 转化的单位,可以变成 px / rpx
transformUnit: 'px',
},
},
}
src/app.styl
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
\ No newline at end of file
src/pages/index/index.vue
<template>
<view class="index">
<view class="index text-gray-400">
<view>
<img src="" alt="">
<img src="" alt="" />
</view>
{{ msg }} <Dongdong />
<view class="index text-gray-400"> {{ msg }} <Dongdong /> </view>
<view class="btn">
<nut-button type="primary" @click="handleClick('text', msg2, true)">点我</nut-button>
<nut-button type="primary" @click="handleClick('text', msg2, true)"
>点我</nut-button
>
</view>
<nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover"/>
<nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover" />
</view>
</template>
......@@ -17,7 +19,7 @@ import { Dongdong } from '@nutui/icons-vue-taro';
export default {
name: 'Index',
components: {
Dongdong
Dongdong,
},
setup() {
const state = reactive({
......@@ -25,7 +27,7 @@ export default {
msg2: '你成功了～',
type: 'text',
show: false,
cover: false
cover: false,
});
const handleClick = (type, msg, cover = false) => {
......@@ -37,15 +39,15 @@ export default {
return {
...toRefs(state),
handleClick
}
}
}
handleClick,
};
},
};
</script>
<style lang="scss">
.index {
font-family: "Avenir", Helvetica, Arial, sans-serif;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
......
tailwind.config.js 0 → 100644
/** @type {import('tailwindcss').Config} */
const range = (size) =>
Object.fromEntries(
[...Array(size).keys()]
.slice(1)
.map((i) => [`${i}_${size}`, `${(i / size) * 100}%`])
);
module.exports = {
// 这里给出了一份 taro 通用示例，具体要根据你自己项目的目录结构进行配置
// 比如你使用 vue3 项目，你就需要把 vue 这个格式也包括进来
// 不在 content glob表达式中包括的文件，在里面编写tailwindcss class，是不会生成对应的css工具类的
content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
// 其他配置项 ...
corePlugins: {
// 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发多端，你应该使用 process.env.TARO_ENV 环境变量来控制它
preflight: false,
},
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment