반응형

matplotlib의 plot기능에서 색상/라인/마커의 종류에 대해 알아보겠습니다.

 

<예시코드>

import matplotlib.pyplot as plt

plt.plot([1, 2, 3, 4], [2, 4, 6, 8], 'bo-')     # 파란색 + 마커 + 실선
plt.xlabel('X-Axis')
plt.ylabel('Y-Axis')
plt.show()

 

<컬러와 라인 스타일>

 

<마커 종류>

반응형
반응형

 인텔리제이(Intellij) IDE 를 사용하여 간단한 텍스트 에디터를 만들어보도록 하겠습니다.

 

1. 새 프로젝트 생성

인텔리제이 메뉴에서 File - New - Project 를 클릭하여 새 프로젝트를 생성해줍니다. Name은 editor로 하고, 적당한 위치에 아래와 같은 세팅으로 진행할 예정입니다. JDK는 설치되어있지 않다면 JDK의 드롭다운 메뉴 중 Download JDK를 눌러, 적당한 버전을 고른 후 다운로드 받아줍니다. 혹은 직접 원하는 JDK를 다운로드 받아서 선택할 수도 있습니다.

2. Main Class 생성

프로젝트 하위 폴더 중 src에서 우클릭하여 New - Java Class 를 클릭한 후, 클래스 이름을 editor로 하여 새로운 클래스를 생성해줍니다. 

만들어진 클래스 내부에 프로그램 진입점인 main함수를 만들어서 테스트해보겠습니다.

public class editor {
    public static void main(String[] args){
        System.out.println("Hello world");
    }
}

3. Build & Run

Build - Build Project를 눌러 프로젝트를 빌드해줍니다. (최초에는 Run 메뉴가 아직 활성화되지 않았습니다. 한번만 Build해주면, 다음부터는 Run만해도 자동으로 Build까지 수행해줍니다.)

다음으로 Run해줍니다. 그리고 editor라고 되어있는 메뉴를 클릭합니다.

콘솔에 Hello world가 잘 나옵니다.

4. GUI 프로그램 코드

아래의 코드를 복사하여 실행이 되는지 확인해봅니다.

import javax.swing.*;
import java.io.*;
import java.awt.event.*;


public class editor extends JFrame implements ActionListener {

    JTextArea t;
    JFrame f;

    // Constructor
    editor(){
        f = new JFrame("editor");
        f.setDefaultCloseOperation(f.EXIT_ON_CLOSE);
        
        // 테마 설정
        try{
            UIManager.setLookAndFeel("com.birosoft.liquid.LiquidLookAndFeel");
        } catch (Exception e) {
            System.out.println(e + "오류 발생");
        }
                
        t = new JTextArea(); // 텍스트 편집창
        JMenuBar mb = new JMenuBar(); // 메뉴바

        JMenu m1 = new JMenu("File"); //메뉴1
        JMenuItem mi1 = new JMenuItem("New"); //메뉴 아이템1
        JMenuItem mi2 = new JMenuItem("Open"); //메뉴 아이템2
        JMenuItem mi3 = new JMenuItem("Save"); //메뉴 아이템3
        JMenuItem mi9 = new JMenuItem("Print"); //메뉴 아이템4
        mi1.addActionListener(this);
        mi2.addActionListener(this);
        mi3.addActionListener(this);
        mi9.addActionListener(this);
        m1.add(mi1);
        m1.add(mi2);
        m1.add(mi3);
        m1.add(mi9);

        JMenu m2 = new JMenu("Edit");	// 메뉴2
        JMenuItem mi4 = new JMenuItem("cut"); //메뉴 2-1
        JMenuItem mi5 = new JMenuItem("copy");//메뉴 2-2
        JMenuItem mi6 = new JMenuItem("paste");//메뉴 2-3
        mi4.addActionListener(this);
        mi5.addActionListener(this);
        mi6.addActionListener(this);
        m2.add(mi4);
        m2.add(mi5);
        m2.add(mi6);

        JMenuItem mc = new JMenuItem("close"); // 메뉴3
        mc.addActionListener(this);

        mb.add(m1);
        mb.add(m2);
        mb.add(mc);

        f.setJMenuBar(mb);
        f.add(t);
        f.setSize(500, 500);
        f.show();


    }

	// 각 클릭 이벤트에 대한 기능 정의
    @Override
    public void actionPerformed(ActionEvent e) {
        String s = e.getActionCommand();

        if (s.equals("cut")){
            t.cut();
        } else if (s.equals("copy")){
            t.copy();
        } else if(s.equals("paste")){
            t.paste();
        } else if (s.equals("Save")){
            JFileChooser j = new JFileChooser("f:");

            int r = j.showSaveDialog(null);

            if (r == JFileChooser.APPROVE_OPTION){
                File fi = new File(j.getSelectedFile().getAbsolutePath());
                try {
                    FileWriter wr = new FileWriter(fi, false);
                    BufferedWriter w = new BufferedWriter(wr);
                    w.write(t.getText());

                    w.flush();
                    w.close();
                } catch (Exception evt){
                    JOptionPane.showMessageDialog(f, evt.getMessage());
                }
            } else JOptionPane.showMessageDialog(f, "the user cancelled the operation");
        } else if (s.equals("Print")) {
            try {
                t.print();
            } catch (Exception evt) {
                JOptionPane.showMessageDialog(f, evt.getMessage());
            }
        } else if (s.equals("Open")){
            JFileChooser j = new JFileChooser("f:");
            int r = j.showOpenDialog(null);
            if (r == JFileChooser.APPROVE_OPTION){
                File fi = new File(j.getSelectedFile().getAbsolutePath());

                try {
                    String s1 = "", sl = "";
                    FileReader fr = new FileReader(fi);
                    BufferedReader br = new BufferedReader(fr);

                    sl = br.readLine();

                    while((s1 = br.readLine()) != null){
                        sl = sl + "\n" + s1;
                    }
                    t.setText(sl);
                } catch(Exception evt){
                    JOptionPane.showMessageDialog(f, evt.getMessage());

                }
            } else JOptionPane.showMessageDialog(f, "the user canced the operation");
        }
        else if (s.equals("New")){
            t.setText("");
        } else if(s.equals("close")){
//            f.setVisible(false);
            System.exit(0);
        }
    }

    public static void main(String[] args) {

        editor e = new editor();
    }
}

 

 

5. 테마 적용

프로젝트(editor) 에서 우클릭 후 New- Directory를 클릭하고, 폴더 이름을 libs로 하여 새 폴더를 생성합니다.

생성된 폴더에 제가 애용하는 liquid 테마를 복사해 넣습니다. 해당 테마(라이브러리)는 첨부 참조하시기 바랍니다.

liquidlnf.jar
0.35MB

폴더를 보면 liquidlnf.jar파일이 추가되어 있는 것이 보입니다. libs폴더를 우클릭 후, Add as Library...를 클릭, OK 클릭하면 해당 폴더의 라이브러리들이 자동으로 프로젝트 라이브러리 리스트에 추가됩니다.

실행해보면 liquid 테마가 들어간 프로그램이 실행되는 모습을 볼 수 있습니다. (버튼이 많아야 좀 더 화려한데...)

 

이상으로 간단한 텍스트 에디터를 Swing으로 만들어보았습니다.

 

~~끝~~

반응형
반응형

 

linux를 처음 알고 시작했을 당시만해도 xmms라는 콘솔에서 실행하는 프로그램을 설치하고 음악을 듣곤 했었는데, 거기서부터 파생된 gui형태의 프로그램들이 많이 나온것 같습니다. xmms2도 있었고, audacious라는 프로그램을 최근까지도 메인으로 사용하고 있었는데, 얼마전 qmmp라는 또다른 프로그램을 알게 되었습니다. 이름에서 알 수 있듯이 QT기반의 프로그램 이라고 합니다. 어떤 녀석인지 한 번 설치해 보도록 하겠습니다.

현재 제 데스크탑에는 ubuntu 20.04 lts가 설치되어 있습니다. 그래서 ubuntu package manager로 가서 qmmp를 찾아봅니다. 2개가 나오는데 어떤걸까요? 아래쪽이 1.5 버전이라고 되어있어서 아래쪽 프로그램을 설치하겠습니다.

설치하고 나니 보이긴 하는데, 아이콘이 안나오네요...ㅠㅠ

 

프로그램 실행은 문제가 없어 보입니다.

아이콘이 안나오는게 찜찜하네요. 아까 설치하지 않은 1.3버전을 설치해보도록 하겠습니다. 혹시 모르니 qmmp 사이트에서 repository를 추가한 후 업데이트를 합니다.

sudo add-apt-repository ppa:forkotov02/ppa
sudo apt update

 

나비모양의 아이콘이 있는 Qmmp가 하나 더 설치되었습니다.

실행해보니 버전이 1.6.1??

저장소 업데이트가 효과가 있었나봅니다. 먼저 설치했던(아이콘 안나오는..) 1.5버전을 삭제했습니다. 그래도 실행이 잘 되네요..^^;;

 

스킨을 한번 변경해보겠습니다. 구글에서 qmmp skin 이라고 검색하고 확장자가 .wsz인 파일 몇개를 다운받아 놓습니다. 어떤 분이 몇가지 스킨을 모아놓으셔서 링크를 공유해드립니다. 다운받은 뒤 Qmms 우클릭 > 설정 > 모양새 > 스킨 > 추가...로 받아놓은 스킨 파일들을 추가해줍니다.

적당한 스킨을 하나 클릭하여 "닫기" 버튼을 클릭하면..

잘 적용이 되네요~

반응형
반응형

JavaFX에서 css파일을 적용하는 방법에 대해 알아보겠습니다.

 

1. CSS 파일 추가

"resources - 프로젝트이름폴더" 하위에 css파일을 추가합니다. 샘플로 darktheme.css라고 이름지었습니다.

2. CSS파일 적용

HelloApplication클래스의 Scene 선언부 바로 뒤에 darktheme을 불러오는 코드를 추가합니다.

package com.example.test07;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;


public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 1024, 760);
        scene.getStylesheets().add(getClass().getResource("darktheme.css").toString()); //코드 추가

        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

 

3. CSS샘플 코드(darktheme.css)

웹에서 사용하는 CSS문법과 거의 비슷한데, 속성 앞에 "-fx-"가 들어갑니다. WPF보다 너무 편한것 같네요.

.root {
    -fx-background-color: #f3f3f3;
}
.button {
    -fx-background-radius: 15px;
    -fx-background-color:
        rgba(0,0,0,0.08),
        linear-gradient(#9a9a9a, #909090),
        linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%);
    -fx-background-insets: 0 0 -1 0,0,1;
    -fx-padding: 3 30 3 30;
    -fx-text-fill: #242d35;
    -fx-font-size: 14px;
}
.button:hover{
    -fx-background-radius: 15px;
    -fx-background-color:
            rgba(0,0,0,0.08),
            linear-gradient(#5a61af, #51536d),
            linear-gradient(#e4fbff 0%,#cee6fb 10%, #a5d3fb 50%, #88c6fb 51%, #d5faff 100%);
    -fx-background-insets: 0 0 -1 0,0,1;

    -fx-padding: 3 30 3 30;
    -fx-text-fill: #242d35;
    -fx-font-size: 14px;
}

 

4. 결과

 

5. 기타 다른 스타일의 샘플 

Mac의 OSX 스타일 찾다보니 여기까지 오게 되었습니다. 버튼은 아래의 여러가지 스타일을 참고해서 만들면 좋을 것 같습니다.

#green {
    -fx-background-color:
        linear-gradient(#f0ff35, #a9ff00),
        radial-gradient(center 50% -40%, radius 200%, #b8ee36 45%, #80c800 50%);
    -fx-background-radius: 6, 5;
    -fx-background-insets: 0, 1;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
    -fx-text-fill: #395306;
}
#round-red {
    -fx-background-color: linear-gradient(#ff5400, #be1d00);
    -fx-background-radius: 30;
    -fx-background-insets: 0;
    -fx-text-fill: white;
}
#bevel-grey {
    -fx-background-color: 
        linear-gradient(#f2f2f2, #d6d6d6),
        linear-gradient(#fcfcfc 0%, #d9d9d9 20%, #d6d6d6 100%),
        linear-gradient(#dddddd 0%, #f6f6f6 50%);
    -fx-background-radius: 8,7,6;
    -fx-background-insets: 0,1,2;
    -fx-text-fill: black;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}
#glass-grey {
    -fx-background-color: 
        #c3c4c4,
        linear-gradient(#d6d6d6 50%, white 100%),
        radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%);
    -fx-background-radius: 30;
    -fx-background-insets: 0,1,1;
    -fx-text-fill: black;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 );
}
#shiny-orange {
    -fx-background-color: 
        linear-gradient(#ffd65b, #e68400),
        linear-gradient(#ffef84, #f2ba44),
        linear-gradient(#ffea6a, #efaa22),
        linear-gradient(#ffe657 0%, #f8c202 50%, #eea10b 100%),
        linear-gradient(from 0% 0% to 15% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0));
    -fx-background-radius: 30;
    -fx-background-insets: 0,1,2,3,0;
    -fx-text-fill: #654b00;
    -fx-font-weight: bold;
    -fx-font-size: 14px;
    -fx-padding: 10 20 10 20;
}
#dark-blue {
    -fx-background-color: 
        #090a0c,
        linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
        linear-gradient(#20262b, #191d22),
        radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
    -fx-background-radius: 5,4,3,5;
    -fx-background-insets: 0,1,2,0;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
    -fx-font-family: "Arial";
    -fx-text-fill: linear-gradient(white, #d0d0d0);
    -fx-font-size: 12px;
    -fx-padding: 10 20 10 20;
}
#dark-blue Text {
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 1, 0.0 , 0 , 1 );
}
#record-sales {
    -fx-padding: 8 15 15 15;
    -fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
    -fx-background-radius: 8;
    -fx-background-color: 
        linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
        #9d4024,
        #d86e3a,
        radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
    -fx-font-weight: bold;
    -fx-font-size: 1.1em;
}
#record-sales:hover {
    -fx-background-color: 
        linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
        #9d4024,
        #d86e3a,
        radial-gradient(center 50% 50%, radius 100%, #ea7f4b, #c54e2c);
}
#record-sales:pressed {
    -fx-padding: 10 15 13 15;
    -fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}
#record-sales Text {
    -fx-fill: white;
    -fx-effect: dropshadow( gaussian , #a30000 , 0,0,0,2 );
}
#rich-blue {
    -fx-background-color: 
        #000000,
        linear-gradient(#7ebcea, #2f4b8f),
        linear-gradient(#426ab7, #263e75),
        linear-gradient(#395cab, #223768);
    -fx-background-insets: 0,1,2,3;
    -fx-background-radius: 3,2,2,2;
    -fx-padding: 12 30 12 30;
    -fx-text-fill: white;
    -fx-font-size: 12px;
}
#rich-blue Text {
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1);
}
#big-yellow {
    -fx-background-color: 
        #ecebe9,
        rgba(0,0,0,0.05),
        linear-gradient(#dcca8a, #c7a740),
        linear-gradient(#f9f2d6 0%, #f4e5bc 20%, #e6c75d 80%, #e2c045 100%),
        linear-gradient(#f6ebbe, #e6c34d);
    -fx-background-insets: 0,9 9 8 9,9,10,11;
    -fx-background-radius: 50;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-text-fill: #311c09;
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1);
}
#big-yellow Text {
    -fx-effect: dropshadow( one-pass-box , rgba(255,255,255,0.5) , 0, 0.0 , 0 , 1);
}
#iphone-toolbar {
    -fx-background-color: linear-gradient(#98a8bd 0%, #8195af 25%, #6d86a4 100%);
}
#iphone {
    -fx-background-color: 
        #a6b5c9,
        linear-gradient(#303842 0%, #3e5577 20%, #375074 100%),
        linear-gradient(#768aa5 0%, #849cbb 5%, #5877a2 50%, #486a9a 51%, #4a6c9b 100%);
    -fx-background-insets: 0 0 -1 0,0,1;
    -fx-background-radius: 5,5,4;
    -fx-padding: 7 30 7 30;
    -fx-text-fill: #242d35;
    -fx-font-family: "Helvetica";
    -fx-font-size: 12px;
    -fx-text-fill: white;
}
#iphone Text {
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , -1 );
}
#ipad-dark-grey {
    -fx-background-color: 
        linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
        linear-gradient(#020b02, #3a3a3a),
        linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
        linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
        linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
    -fx-background-insets: 0,1,4,5,6;
    -fx-background-radius: 9,8,5,4,3;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
}
#ipad-dark-grey Text {
    -fx-effect: dropshadow( one-pass-box , black , 0, 0.0 , 0 , -1 );
}
#ipad-grey {
    -fx-background-color: 
        linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
        linear-gradient(#020b02, #3a3a3a),
        linear-gradient(#b9b9b9 0%, #c2c2c2 20%, #afafaf 80%, #c8c8c8 100%),
        linear-gradient(#f5f5f5 0%, #dbdbdb 50%, #cacaca 51%, #d7d7d7 100%);
    -fx-background-insets: 0,1,4,5;
    -fx-background-radius: 9,8,5,4;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
}
#ipad-grey Text {
    -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );
}
#lion-default {
    -fx-background-color: 
        rgba(0,0,0,0.08),
        linear-gradient(#5a61af, #51536d),
        linear-gradient(#e4fbff 0%,#cee6fb 10%, #a5d3fb 50%, #88c6fb 51%, #d5faff 100%);
    -fx-background-insets: 0 0 -1 0,0,1;
    -fx-background-radius: 5,5,4;
    -fx-padding: 3 30 3 30;
    -fx-text-fill: #242d35;
    -fx-font-size: 14px;
}
#lion {
    -fx-background-color: 
        rgba(0,0,0,0.08),
        linear-gradient(#9a9a9a, #909090),
        linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%);
    -fx-background-insets: 0 0 -1 0,0,1;
    -fx-background-radius: 5,5,4;
    -fx-padding: 3 30 3 30;
    -fx-text-fill: #242d35;
    -fx-font-size: 14px;
}
#windows7-default {
    -fx-background-color: 
        #3c7fb1,
        linear-gradient(#fafdfe, #e8f5fc),
        linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);
    -fx-background-insets: 0,1,2;
    -fx-background-radius: 3,2,1;
    -fx-padding: 3 30 3 30;
    -fx-text-fill: black;
    -fx-font-size: 14px;
}
#windows7 {
    -fx-background-color: 
        #707070,
        linear-gradient(#fcfcfc, #f3f3f3),
        linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%);
    -fx-background-insets: 0,1,2;
    -fx-background-radius: 3,2,1;
    -fx-padding: 3 30 3 30;
    -fx-text-fill: black;
    -fx-font-size: 14px;
}

 

반응형
반응형

IntelliJ에서 JavaFX 프로젝트 생성을 할 때 Maven 또는 Gradle 빌드환경을 선택하도록 되어있습니다. Gradle환경에서 외부 라이브러리 추가하는 방법에 대해 알아보겠습니다.

1. build.gradle 파일 수정

Gradle 환경으로 프로젝트를 생성하고 외부 Library를 추가할 때에는 build.gradle파일의 dependencies 부분에 인식시켜줘야 합니다.

<build.gradle>

dependencies {
    implementation files("libs/gson-2.9.0.jar") // 라이브러리 추가부분
    implementation files("libs/aquafx-0.1.jar") // 라이브러리 추가부분
    testImplementation("org.junit.jupiter:junit-jupiter-api:${junitVersion}")
    testRuntimeOnly("org.junit.jupiter:junit-jupiter-engine:${junitVersion}")
}

참고로 기존에 library 추가 명령은 compile, runtime, testCompile, testRuntime 이었으나, Gradle 4.10 (2018.8.27) 이래로 deprecate 되었습니다. 그리고 Gradle 7.0 (2021.4.9) 부터 삭제되었습니다. 삭제된 네 명령은 각각 implementation, runtimeOnly, testImplementation, testRuntimeOnly 으로 대체되었습니다. 아래와 같은 오류가 발생했다면 명령어를 다시 확인해봐야합니다.

Could not find method compile() for arguments [org.springframework:spring-context:5.0.2.RELEASE] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

 


2. module-info.java 수정

module-info.java 파일에 해당 모듈도 추가를 해줘야 합니다.

반응형
반응형

1. Vue 프로젝트 시작

vue create . //폴더를 먼저 만들고 해당 폴더를 프로젝트 폴더로 하여 생성

 

2. Electron-Builder 설치

이거 설치하고 테스트를 해본다.

vue add electron-builder

 

3. 배포 테스트

npm run electron:build

 

4. Router 설치

 

vue add router

 

- App.vue파일이 자동으로 업데이트 됨

<template>
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
  <router-view>
</template>

- ./views/HomeView.vue와 /views/AboutView.vue 파일이 자동 생성됨-

- ./router/index.js 파일이 자동 생성됨

 

5. Bootstrap-vue 설치

npm install bootstrap-vue bootstrap

 Bootstrap-vue 설정 (main.js)

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

 

6. 기타 라이브러리 설치

npm i axios, vuex
반응형
반응형

1. 설치

npm i --save bootstrap
npm i --save @popperjs/core  // 부트스트랩 실행에 필요

2. main.js에 두줄만 Import하면 됨

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

// 아래 두줄만 넣으면 된다.
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'

createApp(App)
.use(router)
.mount('#app')

 

*** bootstrap-vue 적용하기

npm install vue bootstrap-vue bootstrap

 

이제 main.js에  import

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
반응형
반응형

state : data

getters : computed

mutations : methods

actions : methods(비동기)

Vuex action에서의 활용

context.state

context.getters

context.commit (mutation의 함수 사용시)

context.dispatch (action의 함수 사용시)

Vue 컴포넌트에서 Vuex Helper 사용

...mapState('모듈',[

   '상태1','상태2'

])   ===> computed에서 사용

...mapGetters('모듈',[

   '상태1','상태2'

])  ===> computed에서 사용

...mapMutations('모듈',[

   '상태1','상태2'

])  ===> methods에서 사용

...mapActions('모듈',[

   '상태1','상태2'

])  ===> methods에서 사용

 

반응형

+ Recent posts