step1. init vue project
install vue and vue-cli
vue:install
1
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
1
git add .
check git statue
git:state
add to Respository
git:add
1
git add .
commit to Respository
git:commit
1
git commit -m "add vue project"
add remote url
git:remote:add:origin
1
git remote add origin ${input:git_remote_url}
step3. source version up
add bootstrap
vue:install:bootstrap
1
npm install bootstrap bootstrap-vue vuetify --save
change src
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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
1
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
