vue插件

vue插件和框架

mint-ui 框架

移动端

构建界面

使用方式

  • 1:下载 npm i mint-ui --save
  • 2:在main.js文件中 引入mint-ui 及css
  • 3:安装插件(Vue.use(mint-ui的对象))
1
2
3
4
5
6
7
//1:引入对象
import MintUi from 'mint-ui';
//2:引入其css
import 'mint-ui/lib/style.css';
//安装插件
Vue.use(MintUi); // 执行内部,就是多次注册全局组件

mui 框架

移动端

构建界面

axios 插件

i18n

vue-i18n

  • internationalization 国际化
  • 在你项目完善以后,涉及到可能需要给歪果仁使用
  • vue中的插件
  • vue-i18n
    • 1:下载 npm i vue-i18n --save
    • 2:引入对象并安装插件
    • 3:创建i18n对象、配置:默认语言(locale)、数据(messages)
    • 4:将实例交给vue
    • 5:显示(在模板template ) $t
  • 通过下拉列表(动态的)。改变。变更页面中显示的数据

const messages = {

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
'zh-cn': {
name: 'vue-i18n',
desc: '基于VueJS的国际化多语言切换组件',
lang: '中',
msg1: '1.支持表单元素属性',
msg2: '2.支持模板参数替换',
msg3: '3.支持多级对象',
msg4: '4.支持刷新后保存语言状态'
},
'en': {
name: 'vue-i18n',
desc: 'Internationalization plugin of VueJS',
lang: 'EN',
msg1: '1.Support Form element properties',
msg2: '2.Support Template parameter substitution',
msg3: '3.Support multi-level objects',
msg4: '4.Support save the language status'
}

}

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
template>
<div>
显示数据区域:$t transform
<hr/>
{{ $t('name') }} <br/>
{{ $t('desc') }} <br/>
{{ $t('lang') }} <br/>
{{ $t('msg1') }} <br/>
{{ $t('msg2') }} <br/>
{{ $t('msg3') }} <br/>
{{ $t('msg4') }}
<select @change="change" v-model="selected">
<option v-for="(language,index) in languages" :key="index" :value="language.value">{{language.viewName}}</option>
</select>
</div>
</template>
<script>
export default {
data(){
return {
data:[],//返回的是数组
selected:'', //下拉列表的值
languages:[
{
viewName:'请选择',
value:''
},
{
viewName:'中文',
value:'zh-cn'
},{
viewName:'english',
value:'en'
}]
}
},
created(){
},
methods:{
change(){
console.log(this.selected);
this.$i18n.locale = this.selected;
}
}
}
</script>

element-ui 框架

PC端