vue2 使用 tailwind css vscode 100%成功

环境

vue -V ---- @vue/cli 5.0.8

node -v ----- v16.15.0

npm -v ----- 6.14.18

环境不一样可能不会100%成功哦

创建项目

vue create tailwind

选择vue2

修改package.json

javascript 复制代码
"dependencies": {
    "@babel/eslint-parser": "^7.24.7",
    "core-js": "^3.6.5",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.19",
    "@vue/cli-plugin-eslint": "~4.5.19",
    "@vue/cli-service": "~4.5.19",
    "autoprefixer": "^9.8.8",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
    "vue-template-compiler": "^2.6.11"
  },

修改vue.config.js

javascript 复制代码
//vue.config.js 
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
            require("tailwindcss"), 
            require("autoprefixer")
        ],
      },
    },
  },
};

根目录新增文件 .eslintrc.js

javascript 复制代码
module.exports = {
  root: true,
  env: {
    node: true,
    jquery: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 禁止修改const声明的变量
    'no-const-assign': 2,
    // 缩进
    'indent': 0,
    //函数参数不能重复
    'no-dupe-args': 2,
    //switch中的case标签不能重复
    'no-duplicate-case': 2,
    //禁止非必要的括号
    'no-extra-parens': 2,
    //禁止多余的冒号
    'no-extra-semi': 2,
    //空行最多不能超过2行
    'no-multiple-empty-lines': [1, {'max': 2}],
    'no-tabs':'off',
    //'vue/script-indent': ['error', 2, {'baseIndent': 1}],
    //引号类型 `` "" ''
    'quotes': [2, 'single'],
    "camelcase": 0,
    'no-useless-escape':0,
    'no-array-constructor': 0,//禁止使用数组构造器
    'spaced-comment': ['error', 'always'],
    'no-multi-spaces': [0, {ignoreEOLComments: true}],
    'new-cap':0,
    "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],
    "eqeqeq": [2, "allow-null"],
    "no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
    "space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
    "no-var": 2,
    "no-unused-vars": 0,
    "vue/valid-v-model": 0
  }
}

修改src/main.js

javascript 复制代码
import Vue from 'vue'
import App from './App.vue'
import '@/assets/tailwindcss.css'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

在src/assets 里面新增文件tailwindcss.css

javascript 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

在根目录新增文件tailwind.config.js

javascript 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
  //文件路径根据自己项目来定,可能是 ./src/**/*.{js,ts,jsx,tsx}
  purge: ["./app/**/*.{js,jsx,vue}", "./app/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};

vscode按照插件Tailwind CSS IntelliSense

npm install rimraf -g

rimraf node_modules

npm install

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

启动项目 npm run serve

相关推荐
翻滚吧键盘18 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。37 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟2 小时前
用Sass循环实现炫彩文字跑马灯效果
前端