javascript vue-cli snipet

Posted 2021-05-03

## plugins

### template

- vue-cli-plugin-pug

### script

- vue-cli-plugin-coffee
    - coffeescript
    - coffee-loader

### style

- ress
- postcss-ghost-utils

### electron

- vue-cli-plugin-electron-builder
    - electron

<template lang="pug">
#app
  nav.nav
    router-link(to="/") Home
    | |
    router-link(to="/alias") Alias

  router-view
</template>

<style lang="scss" scoped>
#app {
}
</style>

<template lang="pug">
#app
  img(alt="Vue logo", src="./assets/logo.png")
  hello-world(msg="Welcome to Your Vue.js App")
</template>

<script lang="coffee">
import HelloWorld from "./components/HelloWorld.vue"

export default
  components:
    "hello-world": HelloWorld
</script>

<style lang="scss">
#app {
}
</style>

process.env.VUE_APP_VERSION = require("./package.json").version;

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "ress";
          @import "@/styles/bases/_typography.scss";
        `
      }
    }
  }
};

# use coffeescript
*.vue

module.exports = {
  plugins: {
    "autoprefixer": {},
    "postcss-ghost-utils": {}
  }
};

import Vue from "vue"
import Router from "vue-router"

# import Home   from "./views/Home.vue"
# import Abount from "./views/Abount.vue"

Vue.use Router

export default new Router
  mode: 'history'
  linkActiveClass: "-current"
  scrollBehavior: (to, from, savedPosition) -> if savedPosition then savedPosition else { x: 0, y: 0 }
  routes: [
    {
      path: "/"
      name: "home"
      component: => `import(/* webpackChunkName: "home" */ "./views/Home.vue")`
    }
    {
      path: "/about"
      name: "about"
      component: => `import(/* webpackChunkName: "about" */ "./views/About.vue")`
    }
  ]

import Vue from 'vue'
import App from './App.vue'
import router from './router.coffee'
// import store from './store'
// import './registerServiceWorker'

// Vue.config.devtools = false
Vue.config.performance = process.env.NODE_ENV !== 'production'
Vue.config.productionTip = process.env.NODE_ENV !== 'production'

new Vue({
  router,
  // store,
  render: (h) => h(App)
}).$mount('#app')