+
Skip to content

gimjin/iXiaer

Repository files navigation

JavaScript Style Guide

iXiaer

夏尔猫舍App(Vuejs + Webpack + iView)

安装Nodejs 和 Ruby

  • 推荐安装node版本v10.11.0
  • 推荐安装ruby版本v2.3.7p456

已安装的插件及依赖

  • 查看package.json了解所有插件,关于每个插件的作用请Baidu或Google
  • npm国内非常慢,建议切换淘宝的源,请访问 https://npm.taobao.org

运行iXiaer

$ cd iXiaer
$ npm install
$ npm run dev

App技术知识点

  • main.js
  • 全局数据集Vuex在New Vue()绑定store,子模块中this.$store访问
  • 按需引入iView
  • cookie,Vue.use(VueCookie)后直接可以在子组件中this.$cookie访问
  • App.vue
  • iView Grid栅格做响应式布局,与其他iView组件使用
  • <transition> 动画,有css3 animation和transition的所有功能,理论上可以做所有动画(请参考官网教程>过渡 & 动画)
  • <keep-alive> keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
  • <router-view> 组件切换功能,有点类似HTML iFrame或者 Android fragment
  • 同步导入组件 与 异步导入组件
  • @import 导入scss文件
  • this.$i18n.locale = 'en_US' 切换国际化语言方法
  • <v-touch> 实现Swipe, Tap, Double Tap等操作
  • components/ContentDetail.vue
  • 动态组件 <component :is"comp">
  • 插槽 <slot name="info"></slot>
  • 自定义事件 this.$emit('myEvent') <div @myEvent=""> 另外:.sync符号是自定义时间的一种语法糖
  • i18n国际化,{{ $t("message.hi") }} 引用i18n/index.js内容
  • components/ImageSison.vue
  • @loaded()事件同HTML中onload()
  • iVIew LoadingBar 页面顶部显示进度条,与控制进度条
  • require('../assets/sison.jpg') 会通过url-loader引入更新
  • HTML 标签中使用 @ : 符号语法糖 @click 其实是 v-on:click,:style 其实是 v-bind:style的写法。更多 https://cn.vuejs.org/v2/api/#v-bind
  • <style scoped> scoped是作用域标签,里面所有的声明只在此组件生效
  • components/DisplayWeather.vue

小小Bug给的警告

切换到Larva界面时手动刷新浏览器时背景图片是Larva,但是其他打招呼都是Sison的。 原因是App.vue中data.name设置成静态的值'Sison',所以建议实际项目中用后台动态数据设置。

About

夏尔猫舍网站 Vuejs + Webpack + iView Demo

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载