_ study about vue programming with VueMastery _
* Getting-Started
Doc Vue : https://cli.vuejs.org/guide/ -- create project with command line :
- npm install -g @vue/cli (pastikan sudah terinstall node-js version 8.9 or above (8.11.0+ recommended))
- vue --version (cek versi vue nya)
- vue create real-world-vue (real-world-vue adalah nama project (for vue versi 2 to above))
- lalu pilih manually select features
- router, vuex, linter/formatter
- ESlint + Prettier
- Lint on save
- in dedicated config files
- pilih No
- setelah project selesai dibuat ketik cd real-world-vue (masuk ke direktori project)
- npm run serve (untuk menjalankan aplikasi)
-- create project with vue ui :
- ketik vue ui
- pilih + create a new project here
- project folder : real-world-vue
- package manager : default
- select a preset : manual
- pilih router, vuex, linter/formatter
- pick a linter/formatter config : ESLint + Prettier
- pick additional lint features : Lint On Save
- save as a new preset : Continue without saving
* customize Vs Code -- add extention :
- vetur
- Eslint
- Prettier
- copy realtive path
* Customize UI
- List Vue UI Component Libraries : https://www.codeinwp.com/blog/vue-ui-component-libraries/
- Doc Vuetify : https://vuetifyjs.com/en/getting-started/quick-start/ step :
- vue add vuetify
* customize Icons
- Doc Icons : https://vuetifyjs.com/en/customization/icons/ step :
-
npm install @mdi/font -D
-
masukan code berikut
// src/plugins/vuetify.js import '@mdi/font/css/materialdesignicons.css' // tambah code ini import Vue from 'vue' import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({ icons: { // tambah code ini iconfont: 'mdi', // tambah code ini }, // tambah code ini })