tx-blog

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

导入框架、插件

Vuetify

vue add vuetify

日期时间工具

 npm install dayjs --save

打字机效果

npm install easy-typer-js --save

https://github.com/pengqiangsheng/easy-typer-js

css预处理器：stylus-loader

npm install  stylus@0.54.7 stylus-loader@3.0.2  -save

vuex

vue2只能使用vuex3版本

 npm i vuex@3

vuex-persistedstate 插件 state数据持久化

npm install vuex-persistedstate --save

axios

npm install axios -save

vue-axios

npm install vue-axios -save

markdown-it插件

中文文档

https://markdown-it.docschina.org/

npm install markdown-it --save

语法高亮

npm install highlight.js

剪切板功能

npm install clipboard --save

目录生成

https://github.com/tscanlin/tocbot

npm i tocbot

基于photoswipe实现的vue图片预览组件vue-image-swipe

npm install vue-image-swipe

vue-social-share 分享网页

https://github.com/overtrue/share.js

npm install vue-social-share

vue-infinite-loading无限加载

npm install vue-infinite-loading --save

nprogress 进度条

npm install nprogress --save

vue-baberrage 弹幕插件

npm install vue-baberrage --save

webpack5中缺少polyfills

安装 node-polyfill-webpack-plugin

npm install node-polyfill-webpack-plugin

vue.config.js中修改配置

改前

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ]
})

改后

const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = defineConfig({
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
  },
  transpileDependencies: [
    'vuetify'
  ]
})

Vue Cute Timeline是一个好看的时间轴组件

npm i vue-cute-timeline
或
yarn add vue-cute-timeline

Vue头像裁剪器 - vue-avatar-cropper

不指定版本可能会报错

npm install vue-avatar-cropper@1.0.9