Vueify

[ooookai]

Build VueJS dev environment

Compile

Compile automatically Vue files in the ./private/vue/ to ./public/javascripts/vue/

# run Server
yarn dev
# watch Vue file and use webpack to bundle it.
yarn vue:dev

Config Files

• Webpack: ./webpack.vue.config.js
• Eslint: ./private/vue/.eslintrc_vue.js

Global built-in libraries

Can be use at anywhere in Vue environment

• Lodash
• Antd

Resources

• https://vuejs.org/
• https://vuecomponent.github.io/ant-design/
• https://github.com/vuejs/awesome-vue
• http://lodash.com/docs/

Vue.js (reusable Vue instance)

import Vue from 'vue'
import Antd from 'vue-antd-ui'
import axios from 'axios'
import 'vue-antd-ui/dist/antd.css'

Vue.prototype.$http = axios
Vue.use(Antd)

export default Vue

---

Parsing the server side render data

Jade (Back-end) to VueJS (Front-end)

• Use JSON.stringify() parse the data to String.
• Use Object.assign() to bind all server data to vue.data

Example

.jade file

  - const server = { datafiles, id, userSignedIn, user, layerAlert: layerAlert ? true : false}

  script.
    const server = !{JSON.stringify(server)}
    console.log({server})

  script(src="/javascripts/vue/Datasets.js")

.vue file

 data() {
    return Object.assign(server, {
      maps: {},
    })
  },

New pages

Draft datasets & projects pages

/private/vue/
  Datasets.js
  Datasets.vue
  Projects.js
  Projects.vue
/views/
  datasets.jade
  projects.jade

VueJS testing page

/private/vue/
  Test.js
  Test.vue
  components/TestCard.vue
/views/
  vue.jade

[panthersuper]

looking good! I will start today.