vue3 局部directives

一、element-plus

官方文档

1.安装

npm install element-plus --save

2.全局引入

全部组件全局引入很简单，但影响我们首屏的加载速度，要求加载的东西越少越好，所以前期我们就先全部引入，后期我们再修改成按需引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3.按需引入

借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-import:

$ npm install babel-plugin-import -D

然后，将 babel.config.js 修改为：

// 引入.scss
module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
    ],
  ],
};

// 引入.css
module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`;
        },
      },
    ],
  ],
};

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import { createApp } from 'vue'
import { ElButton, ElSelect } from 'element-plus';
import App from './App.vue';
// 如果要使用.scss样式文件，则需要引入base.scss文件
// import 'element-plus/packages/theme-chalk/src/base.scss'

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);

/* or
 * app.use(ElButton)
 * app.use(ElSelect)
 */

app.mount('#app')
完整组件列表和引入方式（完整组件列表以 reference 为准）

import { createApp } from 'vue'
import App from './App.vue';
// 如果要使用.scss样式文件，则需要引入base.scss文件
// import 'element-plus/packages/theme-chalk/src/base.scss'

import {
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  ElButtonGroup,
  ElCalendar,
  ElCard,
  ElCarousel,
  ElCarouselItem,
  ElCascader,
  ElCascaderPanel,
  ElCheckbox,
  ElCheckboxButton,
  ElCheckboxGroup,
  ElCol,
  ElCollapse,
  ElCollapseItem,
  ElCollapseTransition,
  ElColorPicker,
  ElContainer,
  ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElFooter,
  ElForm,
  ElFormItem,
  ElHeader,
  ElIcon,
  ElImage,
  ElInput,
  ElInputNumber,
  ElLink,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElOption,
  ElOptionGroup,
  ElPageHeader,
  ElPagination,
  ElPopconfirm,
  ElPopover,
  ElPopper,
  ElProgress,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,
  ElRate,
  ElRow,
  ElScrollbar,
  ElSelect,
  ElSlider,
  ElStep,
  ElSteps,
  ElSubmenu,
  ElSwitch,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElTabs,
  ElTag,
  ElTimePicker,
  ElTimeSelect,
  ElTimeline,
  ElTimelineItem,
  ElTooltip,
  ElTransfer,
  ElTree,
  ElUpload,
  ElInfiniteScroll,
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification,
} from 'element-plus';

const components = [
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  ElButtonGroup,
  ElCalendar,
  ElCard,
  ElCarousel,
  ElCarouselItem,
  ElCascader,
  ElCascaderPanel,
  ElCheckbox,
  ElCheckboxButton,
  ElCheckboxGroup,
  ElCol,
  ElCollapse,
  ElCollapseItem,
  ElCollapseTransition,
  ElColorPicker,
  ElContainer,
  ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElFooter,
  ElForm,
  ElFormItem,
  ElHeader,
  ElIcon,
  ElImage,
  ElInput,
  ElInputNumber,
  ElLink,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElOption,
  ElOptionGroup,
  ElPageHeader,
  ElPagination,
  ElPopconfirm,
  ElPopover,
  ElPopper,
  ElProgress,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,
  ElRate,
  ElRow,
  ElScrollbar,
  ElSelect,
  ElSlider,
  ElStep,
  ElSteps,
  ElSubmenu,
  ElSwitch,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElTabs,
  ElTag,
  ElTimePicker,
  ElTimeSelect,
  ElTimeline,
  ElTimelineItem,
  ElTooltip,
  ElTransfer,
  ElTree,
  ElUpload,
]

const plugins = [
  ElInfiniteScroll,
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification,
]

const app = createApp(App)

components.forEach(component => {
  app.component(component.name, component)
})

plugins.forEach(plugin => {
  app.use(plugin)
})

上面是全部的element-plus的组件，将不需要的删除即可

二、tailwindcss

1.安装模块

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

如果报错，就全部删除，

2.创建配置文件

npx tailwindcss init -p --full

这里加上–full，生成的tailwind.config.js文件内会写满默认的属性，方便查阅和修改

3.配置Tailwind以删除生产中未使用的样式

// tailwind.config.js
  module.exports = {
   purge: [],														// 修改前
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],		// 修改后
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

4.创建一个css文件，将基础样式引入，最后添加到入口文件内

// 我喜欢在  src/assets/css/index.css文件内引入

@tailwind base;
@tailwind components;
@tailwind utilities;

// 在入口文件引入
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/css/index.css'		

createApp(App).mount('#app')

5.测试

运行"npm run serve"
如果出现错误 “PostCSS plugin tailwindcss requires PostCSS 8.”
官方解决方案

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

6.如果需要使用超出多少行不显示的功能，需要额外添加模块

npm install @tailwindcss/line-clamp

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    // ...
  ],
}

例子：超出3行不显示

<p class="line-clamp-3">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

三、axios

1.安装

npm install axios

2.封装

一般情况填下，我们需要封装5个方法，get(),post(json),post(formdata),image-upload(),file-upload(),
但图片上传和文件上传可以只在特定组件内使用，所以我们需要封装3个方法

import axios from 'axios' // api: https://github.com/axios/axios
import store from "@/store"		// vuex
import {AxiosResponse, AxiosRequestConfig, AxiosError} from "axios";		// 万恶的ts
import router from '@/router'		//router路由
// 全局的遮罩层控制
import {ElLoading, ElNotification, ElMessage} from 'element-plus'

// 允许跨域
axios.defaults.withCredentials = true
// 超时设置，不建议在这里设置超时
// axios.default.timeout = 10000
// 如果是生产模式 ，就是“/”，如果不是，就是'http://127.0.0.1:8000/'，根据实际情况来
const baseUrl = process.env.NODE_ENV === 'production' ? `/` : 'http://127.0.0.1:8000/',
// 请求拦截器
axios.interceptors.request.use((config: AxiosRequestConfig) => {
	// 添加令牌，
	// 启动遮罩层
}, (error: AxiosError) => {
	//  出现错误，取消遮罩层
}

// 响应拦截器，判断返回码，如果是200或者201，就将结果返回组件，如果不是200或者201，就提示错误
axios.interceptors.response.use(
    axios.interceptors.response.use(
        // 请求结束，关闭遮罩层
        return response
    },
    (error: AxiosError) => {
        // 请求出现错误，请求结束，关闭遮罩层
        // 错误处理
        return error
    }
);
// 封装get方法
export function $get(api: any, params: any) {
    return axios({
        method: "get",
        url: baseUrl + api,
        params: params,
    }).then(response => response.data)
}
// 封装post JSON请求
export function $json(api: any, data: any) {
    return axios({
        method: 'post',
        url: baseUrl + api,
        headers: {'Content-Type': 'application/json'},
        data: data,
    }).then(response => response.data).catch((err) => {
        console.log(err)
    })
}
// 封装post formdata请求
export function $form(api: any, data: any) {
    return axios({
        method: 'post',
        url: baseUrl + api,
        // baseURL: root,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: data,
        transformRequest: [function (data) {
            let ret = ''
            for (const it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }]
    }).then(response => response.data).catch((err) => {
        console.log(err)
    })
}

万恶的 TS

四、wangedit富文本编辑器

五、markdown编辑器

六、存储vuex的数据，刷新不丢失

1.安装

npm install --save vuex-persist

2.引入

# src/store/index.ts

import { createStore } from 'vuex'
import VuexPersistence from 'vuex-persist'

// 自动保存vuex数据到sessionStorage
const baocunshuju = new VuexPersistence({
  storage: window.sessionStorage
})

const store = createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  // plugins: [baocunshuju.plugin],
})

export default store

我喜欢保存到sessionStorage，关闭浏览器就自动清除数据，

七、vue3-click-away点击其他地方关闭

1.安装

npm i -s vue3-click-away

2.引入

// src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import VueClickAway from "vue3-click-away";     // 点击其他地方关闭模块

const app = createApp(App)

app.use(VueClickAway)

3.使用

<div v-if="xianshi" v-click-away="onClickAway">



const xianshi = ref(true)
function onClickAway(){
	xianshi.value = false
}

八、使用阿里图标库的图标

1.网址

https://www.iconfont.cn/

2.将图标添加到 购物车

搜索到满意的图标，将鼠标移上去，点击上面的购物车按钮

3.下载

点击网页右上角的购物车图标，在右侧的弹出栏点击下载代码

4.引入vue项目

将下载的压缩文件解压到vue项目的assets文件夹的某个地方
假设路径为：src/assets/alitubiao/

// src/main.ts
import "@/assets/alitubiao/iconfont.css"

5.使用

打开src/assets/alitubiao/demo_index.html，网页内有使用方法。