Vue插件

图片预览

安装
1
npm install v-viewer
引入

main.js:

1
2
3
4
import Viewer from "v-viewer";
import 'viewerjs/dist/viewer.css';

Vue.use(Viewer)
使用

使用时只需在父标签中加上 v-viewer 属性,它会自动作用于子 img 标签。

1
2
3
<div v-viewer>
<img src="" alt=""/>
</div>

点击图片时就会弹出预览的界面。

MarkDown 的编辑与转换

markdown 编辑器

安装
1
npm install mavon-editor
引入

main.js:

1
2
3
4
import mavonEditor from "mavon-editor";
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)
使用
1
<mavon-editor placeholder="请输入文章" v-model="content"></mavon-editor>

写的内容都保存在了 content 中。

markdown 转 html

安装
1
npm install marked
引入

在需要使用的组件中引入:

1
import {parse} from 'marked'
使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<mavon-editor placeholder="请输入文章" v-model="content"/>

<div v-html="article"></div>
<button @click="md_to_h5">
点击转换
</button>

<script>
import {parse} from 'marked'
data() {
return {
blog: '',
content: ''
}
},
methods: {
md_to_h5() {
// parse 只接受字符串
this.blog = parse(this.content);
}
}
</script>

渲染出来的是默认的 markdown 样式,非常简单,可以去网上下载 css 文件,然后在组件中导入即可。

如果想让代码有高亮,可以引入 highlight.js:

1
2
3
npm install highlight.js --save//安装
import hljs from 'highlight.js'//引用
import "highlight.js/styles/monokai-sublime.css"; // 引入高亮样式 这里我用的是sublime样式

然后在 marked.setOptions 中加上:

1
2
3
4
5
6
7
8
9
10
11
<script>
import {parse, setOPtions} from 'marked'

mounted() {
setOptions({
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
}
</script>

normalize.css

Normalize.css 是一个可以定制的 CSS 文件,它让不同的浏览器在渲染网页元素的时候形式更统一。

Normalize.css 只是一个很小的 css 文件,但它在磨人的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset,Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。总之,Normalize.css 是一种 CSS reset 的替代方案。

安装
1
npm install --save normalize.css
使用

它只是一个初始化样式,在全局导入即可。

1
import 'normalize.css/normalize.css'

vue 项目国际化

这里的国际化是指网站可以通过不同的语言来展示,比如可以切换中文或者英文。

vue 项目的国际化可以通过 vue-i18n 插件来实现。接下来我们来介绍一下它的使用方法。

安装
1
npm install vue-i18n

配置

在 src 目录下新建 lang 文件夹,然后在文件夹下新建 index.js,zh.js,en.js 三个 js 文件。

zh.js 和 en.js 用来存放需要进行转换的文字内容,若还有其他语言,增加相应文件即可。

index.js 用来创建 i18n 实例,然后将其导入 main.js 中。

zh.js
1
2
3
4
5
6
export default {
user: {
username: '用户名',
password: '密码'
}
}
en.js
1
2
3
4
5
6
export default {
user: {
username: 'Username',
password: 'Password'
}
}
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import {createI18n} from 'vue-i18n'
import zh from './zh'
import en from './en'

const i18n = createI18n({
locale: 'zh', // 语言标识,用来切换语言
globalInjection: true, // 作用于全局
legacy: false, // 若要在 setup 中使用 i18n 需设置为 false
messages: {
zh,
en
}
})

export default i18n
main.js
1
2
3
4
5
import i18n from "./lang";

...
app.use(i18n);
...

使用

配置好之后就可以使用了:

1
2
3
4
5
6
7
8
9
<p>
{{ $t('user.username') }}
</p>

<!-- 或者 -->

<p>
{{ t('user.username') }}
</p>

如果想要点击切换语言,可以这样做:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<button @click='changeLang'>
点击切换语言
</button>

<script>
/* vue3 */
import {useI18n} from 'vue-i18n';

setup() {
const i18n = useI18n();
function changeLang() {
// i18n.locale 是一个响应性的 ref 对象
i18n.locale.value = i18n.locale.value === 'en' ? 'zh' : 'en';
}

return {
changeLang
}
}

/* vue2 */
methods: {
changeLang() {
this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
}
}
</script>

更多关于 vue-i18n 的用法请看 https://kazupon.github.io/vue-i18n/zh/introduction.html