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

相关推荐
GISer_Jing3 分钟前
Vue3状态管理——Pinia
前端·javascript·vue.js
萧寂17310 分钟前
ios底部小横条高度适配
css
好开心3318 分钟前
axios的使用
开发语言·前端·javascript·前端框架·html
Domain-zhuo27 分钟前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec1 小时前
XSS跨站脚本攻击漏洞练习
前端·xss
m0_748257181 小时前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工1 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
百万蹄蹄向前冲2 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
Anlici2 小时前
three.js建立3D模型展示地球+高亮
前端·数据可视化·canvas
轻口味2 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos