无依赖插件

islider

无任何依赖的移动端滑动组件

Vue插件

vue插件网站

vuejsexamples

vue项目国际化

兼容性：支持Vue.js 2.x以上

• 安装方法

npm install vue-i18n

• 使用方法

1. 在main.js中引入

import VueI18n from 'vue-i18n'
//挂载插件
Vue.use(VueI18n)
//实例化
const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识，默认语言
    //this.$i18n.locale // 在Vue中通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./common/lang/zh.js'),   // 中文语言包
      'en-US': require('./common/lang/en.js')    // 英文语言包
    }
})

new Vue({
  el: '#app',
  i18n,  // 不要忘记
  store,
  router,
  template: '<App/>',
  components: { App }
})

2. 语言包

en.js

export const m = { 
  title: 'hello'
}

zh.js

export const m = { 
  title: '你好'
}

3. vue中切换语言

changeLangEvent(){
    // 查询当前语言
    console.log(this.$i18n.locale)
    // 切换成en
    this.$i18n.locale = 'en' 
}

4. 模板渲染

html

<span v-text="$t('m.title')"></span>
<span v-html="$t('m.title')"></span> //可以使用带html的字符串
<span>{{$t('m.title')}}</span>

js

data(){
    return {
        title: $t("m.title")
    }
}

构建插件

sass-resource-loader

使所有Vue组件都可以直接使用Sass全局变量，不需要通过import引用

在 build/utils.js中修改

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    //***********这里是要改的**************
    scss: generateLoaders('sass')
      .concat(
        {
          loader: 'sass-resources-loader',
          options: {
            resources: path.resolve(__dirname, '../src/assets/scss/index.scss')
          }
        }
      ),
    //***********上面是要改的**************
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }