安装使用 Vue – Records And Memorys

新建一个目录，随便起名，这里叫 Vue
下载客户端工具

npm install --global vue-cli

1	npm install --global vue-cli

vue cli --version

1	vue cli --version

用客户端工具新建一个 pwa 应用

vue init pwa vue-calculator-pwa

1	vue init pwa vue-calculator-pwa

这个是 cli 2的用法， cli 3 是

vue create my-cool-dashboard
npm run serve

1 2	vue create my-cool-dashboard npm run serve

来源网站

https://www.runoob.com/vue2/vue-install.html

安装部分

https://hackernoon.com/a-progressive-web-app-in-vue-tutorial-part-1-the-vue-app-f9231b032a0b

新建项目 ,

是用的 vue 2.0 做例子，没什么参考价值了

https://www.smashingmagazine.com/2019/02/interactive-weather-dashboard-api-vue-js/

用 vue 建一个天气的 dashboard

另外一个 dashboard https://tips4devs.com/articles/build-a-responsive-dashboard-with-vue-js/

spring boot 做 rest server , vue 做 client , crud

https://developer.okta.com/blog/2018/11/20/build-crud-spring-and-vue

怎么把从 rest 取到的数显示在 table 里

https://stackoverflow.com/questions/41270522/populate-table-in-vue-template-component-from-rest-api

到现在为止 2019-06-18 12：00：00AM

发现的最好的教程

https://dev.to/vuevixens/hands-on-vuejs-for-beginners-part-1-2j2g

https://juejin.im/entry/58f48484da2f60005d3cb46c

https://www.vuemastery.com/ 这个是收费的

https://www.jeffjade.com/2019/01/13/146-awesome-vue-cli3-example/ 中文

开源免费的vue dashboard

https://github.com/creativetimofficial/ct-vue-paper-dashboard-pro

https://learninglaravel.net/vuestic-admin-dashboard-powered-by-vuejs 这个更好一点

上一个网址的git 是

https://github.com/epicmaxco/vuestic-admin

1	https://github.com/epicmaxco/vuestic-admin

vue 怎么定义 templete

a) 直接写在 js 文件里或者 html 页面里

<script>
Vue.component('my-checkbox', {
  template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>`,
  data() {
    return {
      checked: false,
      title: 'Check me'
    }
  },
  methods: {
    check() {
      this.checked = !this.checked;
    }
  }
});
</script>

Vue.component('my-checkbox', {

template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>`,

data() {

return {

checked: false,

title: 'Check me'

}

methods: {

check() {

this.checked = !this.checked;

}

});

</script>

b) SFC single file component 最主流的办法

<template>
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checked: false,
        title: 'Check me'
      }
    },
    methods: {
      check() {
        this.checked = !this.checked;
      }
    }
  }
</script>

</div>

</template>

export default {

data() {

return {

checked: false,

title: 'Check me'

}

methods: {

check() {

this.checked = !this.checked;

}

</script>

带源码的 side bar

https://mdbootstrap.com/docs/vue/navigation/sidenav/

tips

a) vue 没有页面的概念，全是组件 , 在不同组件之间切换用 vue-router ，组件以 .vue结尾

b)Vue.js使用vue-router构建单页应用

https://www.jianshu.com/p/3fd8f088e824

1	https://www.jianshu.com/p/3fd8f088e824

c) 写好 component之后用 webpack 编译打包， webpack 需要：入口js文件：main.js

d) vue 的 render

https://vuejs.org/v2/guide/render-function.html

官方文档

https://www.cnblogs.com/tugenhua0707/p/7528621.html

cnblog 文章