vue常用的插件及taliwindcss

141 阅读1分钟

vue常用的几个yarn安装插件

1. 创建vue项目

 vue create "项目名字"
1.1使用vite创建项目
  yarn create vite

2. 安装less

 yarn add less less-loader@6.0.0 --dev

3.安装vue-router

  yarn add vue-router@3.5.2 

4.安装axios

 yarn add  axios@0.27.2

5. 安装进度条nprogress

 yarn add nprogress

6. 安装vuex

 yarn add vuex@3.6.2

7. 安装mock

 yarn add mock@1.1.0

8.安装swiper

 yarn add  swiper@5.4.5

9. 安装sass

1、卸载当前项目中的sass-loader

	yarn remove sass-loader

2、安装低版本的sass-loader

yarn add sass-loader@7.0.0

3、安装node-sass

yarn add  node-sass

10.安装pina

yarn add pinia@2.0.11

11. 安装tailwindCss

# 删除原来安装的包
yan remove tailwindcss postcss autoprefixer
# 1.安装低版本包
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

# 2.创建配置文件
npx tailwindcss init -p

# 3.创建css文件

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-600 text-white rounded;
  }
}

# 4. 在main.js中引入创建的css文件
import "./taliwind.css"