-
Notifications
You must be signed in to change notification settings - Fork 0
/
instalacija tailwind-a sa Vue.js.txt
174 lines (104 loc) · 4.98 KB
/
instalacija tailwind-a sa Vue.js.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
Kada trazi post 8, kad instaliras preko Vue Cli
<!-- Postupak instalacije tailwind-a preko Cli-a
1) npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
2) pravis u src/assets tailwind.css file, moze i drugacije da se zove i ubacujes u njega ono sto treba (@teilwind base; i tako dalje)
3) npx tailwindcss-cli@latest init -p (moze i bez -p ja mislim): ovo bi trebalo da napravi postcss.config.js i tailwind.config.js
4) u main.js importujes tailwind.css
U tailwind.config.js dodajes npr paletu boja, ako ne dodas imas dostupno samo 8,9 boja, pise na njihovom sajtu u delu za boje
-->
sjsj
instalacija vite-a i vua preko vite-a:
npm init @vitejs/app, to pokrene ceo proces, posle samo pratis
moze i ovako:
https://tailwindcss.com/docs/guides/vue-3-vite, izvor
1) npm init vite my-project, my-project je naziv, sam ga odredjujes
2)npm install
////////////////////////////////////////////////////////////////////////
postupak instalacije sass-a:
npm install -D sass
nakon toga samo napravis fajl i importujes ga gde hoces
//////////////////////////////////////////////////////
Postupak instalacije tailwind-a preko vite-a:
1) npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
2)npx tailwindcss init -p
3) isto pravis u src/assets tailwind.css file, moze i drugacije da se zove i ubacujes u njega ono sto treba (@teilwind base; i tako dalje)
4) u main.js importujes tailwind.css
5) na kraju pokreni ponovo projekat npm run dev
/////////////////////////////////////////////////////////////////////////////////////////
Firebase sa vue.js
1) npm install firebase --save
2) pravis novi fajl, firebase fajl kome dodas config deo iz firebase-a, koji je poseban za svaki projekat
3)U isti fajl dodas i red import firebase from 'firebase'
4) dodas u isti fajl const firebaseApp = firebase.initializeApp(config);
5) U isti fajl dodas i red import firestore from 'firebase/firestore'
6) u isti fajl export default firebaseApp.firestore()
7) u nekim verzijama dolazi do neke greske, pa treba dodati i:
firebaseApp.firestore().settings({timestampsInSnapshots: true})
//preko vezije 9.0.0 ovako unosis ova dva prva reda, ostalo mislim da je isto,
//odnosno, kad unosis firebase funkcije(firestore, auth itd. kao i sam firebase):
import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore';
umesto:
import firestore from 'firebase/firestore' i import firebase from 'firebase'
// https://www.npmjs.com/package/firebase - izvor
//////////////////////////////////////////////////////////////////////////////////////////
add vue router za novi projekat
1) npm install vue-router@next -S , minimum verzija preko 4.0.0
2) folder router pravis i u njemu index.js:
import { createRouter, createWebHistory } from 'vue-router'
import About from './../views/About.vue';
const routes = [
{
path: '/about',
name: 'about',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
// scrollBehavior (to, from, savedPosition) {
// return savedPosition || { top: 0 }
// }
})
export default router;
///////////
3) importovati index.js u main.js i dodati u zadnjem redu createApp(App).use(router).mount('#app') umesto createApp(App).mount('#app')
4) unesi sad na primer <router-view /> ili <router-link> i proveri jel radi u app.vue
///////////////////////////////////////////////////////////////////////////////
instalacija momenta - program za stilizovanje datuma
npm install moment --save
import moment from 'moment'
////////////////////////////////////////////////////////////////////////////////
hosting za Vue.js
1)kad uneses firebase init, u onom postupku kucas da hoces dist folder da bude glavni a ne public
2) Configure as a single-page app (rewrite all urls to /index.html)? ? Yes
( as it’s a single page app however all of the routes would work as expected).
3)File dist/index.html already exists. Overwrite? ? No
(so that Firebase does not overwrite with default index.html file).
4) npm run build
5) firebase deploy
izvor: https://softauthor.com/deploy-vue-js-app-on-firebase-hosting/
//////////////////////////////////////////////////////////////////////////////
Instalacija Vuex-a
npm install vuex --save
pravis novi folder store i u njemu fajl store.js
u tom fajlu kucas:
1) import { createStore } from 'vuex'
2)const store = createStore({
state: {
},
getters:{
});
3)export default store;
4) imporujes fajl u main.js: import store from './store/store'
5) u main.js povezujes createApp(App).use(store).mount('#app');, ovo mount je vec bilo dodajes samo ovo use(store)
//////////////////////////////
JSON server
pozivas json fajl preko: json-server --watch data/db.json --port 8000, data/db.json je putanja do file-a; port 8000, moze da bude i neki drugi
////////////////////////////////////////////////////
axios
npm install axios
samo inportujes nakon toga u fajl import axios from 'axios
/////////////////////////////////////////////////
sifra za git push: 5e44d600-f340-452c-a288-8ad900e24b96