vue.js基礎

https://madewithvuejs.com/?re...

閱讀
vue-loder https://vue-loader.vuejs.org/...
Vuex https://vuex.vuejs.org/zh-cn/
vue-router https://router.vuejs.org/zh-cn/
vue-ssr https://ssr.vuejs.org/zh/
vue-cli https://github.com/vuejs/vue-cli
vue-touch https://github.com/vuejs/vue-...
awesome-vue https://github.com/vuejs/awes...
vue-webpack https://vuejs-templates.githu...
nuxtjs https://nuxtjs.org/
vue-custom-element https://karol-f.github.io/vue...
axios https://segmentfault.com/a/11...

UI 組件庫
element-ui http://element-cn.eleme.io/#/...
bootstrap-vue https://bootstrap-vue.js.org/...
mint-ui http://mint-ui.github.io/#!/z...
vux https://vux.li/#/
muse-ui http://www.muse-ui.org/#/index
https://vuematerial.io/
https://vuetifyjs.com/
https://didi.github.io/cube-u...
https://onsen.io/vue/
https://fe-driver.github.io/v...
http://okoala.github.io/vue-a...
https://aliqin.github.io/atui/
https://www.iviewui.com/
https://zzuu666.github.io/ant...

https://vuep.run/

npm

npm i -g vue-cli   //install --global
vue init webpack jh2k15  #初始化項目
npm i
npm run dev

--save-dev 開發時候依賴的東西devDependencies
--save 發佈以後還依賴的東西dependencies
npm i -S xxxx // npm install --save xxxx
npm i -D xxxx // npm install --save-dev xxxx

改成運行時的版本

ssr服務端渲染
build/webpack.base.conf.js 改爲以下配置，或者註釋掉。

alias: {
 'vue$': 'vue/dist/vue.runtime.esm.js',
 '@': resolve('src')
}

src/main.js 實例化，改爲以下。

new Vue({
  el: '#app',
  router,
  // template: '<div><App/></div>',
  // components: { App },
  render: h => h(App)
})

進度條

https://github.com/hilongjw/v...

main.js

import VueProgressBar from 'vue-progressbar'
const options = {
  color: '#99CCCC',
  failedColor: '#874b4b',
  thickness: '4px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'top',
  inverse: false
}

Vue.use(VueProgressBar, options)

app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <vue-progress-bar></vue-progress-bar>
  </div>
</template>

<script>
export default {
  name: 'app',
  mounted () {
    //  [App.vue specific] When App.vue is finish loading finish the progress bar
    this.$Progress.finish()
  },
  created () {
    //  [App.vue specific] When App.vue is first loaded start the progress bar
    this.$Progress.start()
    //  hook the progress bar to start before we move router-view
    this.$router.beforeEach((to, from, next) => {
      //  does the page we want to go to have a meta.progress object
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        // parse meta tags
        this.$Progress.parseMeta(meta)
      }
      //  start the progress bar
      this.$Progress.start()
      //  continue to next page
      next()
    })
    //  hook the progress bar to finish after we've finished moving router-view
    this.$router.afterEach((to, from) => {
      //  finish the progress bar
      this.$Progress.finish()
    })
  }
}
</script>

router/index.js

import List from '@/components/List'

//...
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/list',
      name: 'List',
      component: List
    }
  ]
//...

components/Hello.vue

<router-link to="list">List</router-link>

引用scss

npm install --save-dev sass-loader
npm install --save-dev node-sass
<style lang="sass">

引用normalize

npm i normalize.css --save
npm install --save-dev style-loader
npm install --save-dev css-loader
import 'normalize.css';

icon-svg

http://www.iconfont.cn/

symbol模式

//components/Icon-svg
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

//引入svg組件
import IconSvg from '@/components/IconSvg'

//全局註冊icon-svg
Vue.component('icon-svg', IconSvg)

//在代碼中使用
<icon-svg icon-class="password" />

懶加載

const Index = () => import('@/components/Index')

加載圖片

<img :src="require('@/assets/img/jh2k15.jpg')">
<img src="~@/assets/head.png" alt="">

router

<router-link tag="li" to="/mine"></router-link>
//
login () {
  this.$router.push({
    path: '/login'
  })
}

:class

<span :class="{pingpai:item.type===2,xindian:item.type===1,hide:item.type===0}">{{item.type===1?"新店":"品牌"}}</span>
<i class="starItem" :class="{half:(score<1 && score> 0),zero:(score <= 0)}"></i>

this

這又是this的套路了..this是和當前運行的上下文綁定的...
通常你在axios或者其餘 promise , 或者setInterval 這些默認都是指向最外層的全局鉤子.
簡單點說:"最外層的上下文就是 window,vue內則是 Vue 對象而不是實例!";
解決方案:
暫存法: 函數內先緩存 this , let that = this;(let是 es6, es5用 var)
箭頭函數: 會強行關聯當前運行區域爲 this 的上下文;

父組件能夠直接調用子組件的方法麼!
能夠,經過$refs或者$chilren來拿到對應的實例

element ui 按需引入

babel-polyfill，babel-preset-es2015，vue-template-es2015-compiler

//.babelrc 
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2",
    ["es2015", { "modules": false }]
  ],
  "plugins": [
    ["component", [
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]],
    "transform-vue-jsx", 
    "transform-runtime"
    
  ]
}