Cmder for Vue

step1. init vue project¶

install vue and vue-cli¶

vue:install

npm install vue vue-cli

init vue project¶

vue:init:webpack

run vue¶

vue:run:dev

build vue¶

vue:build

step2. init git¶

use git to Version control your source.

init git¶

git:init

git add .

check git statue¶

git:state

add to Respository¶

git:add

git add .

commit to Respository¶

git:commit

git commit -m "add vue project"

add remote url¶

git:remote:add:origin

git remote add origin ${input:git_remote_url}

step3. source version up¶

add bootstrap¶

vue:install:bootstrap

npm install bootstrap bootstrap-vue vuetify --save

change src¶

index.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue' // added
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

import 'bootstrap/dist/css/bootstrap.css' // added
import 'bootstrap-vue/dist/bootstrap-vue.css' // added

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <button class="btn btn-primary">test</button>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

check source change¶

git:status

use git:diff:file to check the change of the file.

add change and commit to Respository¶

push to Remote¶

step4. release to product¶

release to heroku

heroku:login¶

creates a new app¶

heroku:create

git init¶

git:init

git init

Initialize a git repository in a new or existing directory¶

heroku:git:remote

push heroku project to master¶

heroku:git:push_heroku_to_master

open the heroku app in a web browser¶

heroku:open

tail heroku logs¶

heroku:logs:tail

heroku:logout¶

heroku:logout