vuesax 이야기 도입

안녕하세요.
이번에는 vuesax를 vue로 만든 파일에 가져온 이야기입니다.

github는 여기

일단 vue로 파일을 만들자!!

종착역에서 제작
terminal

vue create sax(ここはファイル名なので好きな名前をつけてね)

아래의Manually select features태그 요소의 표시 속성을 수정합니다.
그리고 TypeScrept 및 Linter/Formatter
환경과 혼합되어야 하는 각 반사광선은 환경 샘플링을 한다.
※ TypeScript를 사용해 보았지만 잘 만들었습니다
JavaScript에서 가져왔습니다.
(다른 순조로운 분들은 메시지를 남겨주세요)

거기서 5개 정도 물어봤는데 다 Enter 키로 오케이!!

다음 만든 폴더로 이동하십시오!!

terminal

cd sax

열어봐.
terminal

npm run serve

이런 느낌이에요!!

여기서부터 참고 페이지 정보 진행!!
먼저 방금 만든'sax'폴더에 vuesax를 설치합니다.
sax 폴더로 이동
terminal

cd sax

vuesax 설치
terminal

npm install vuesax

재료 아이콘도 설치하는 것이 좋다고 적혀있어서 설치했습니다.
terminal

npm install material-icons --save

다음은 코드를 편집했습니다.

추가된 부분이 사이트에 적혀있어서 그렇게 썼어요.

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import Vuesax from 'vuesax' //追加したよ
import 'vuesax/dist/vuesax.css' //追加したよ
import 'material-icons/iconfont/material-icons.css' //追加したよ

Vue.use(Vuesax) //追加したよ

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

실제로 제가 한번 해볼게요.

이번에 대화에서 놀았는데 어떤 느낌이에요!!

코드가 예제 코드 있어서 썼어요.
App.vue

<template lang="html">
  <div class="centerx">
    <vs-button @click="openConfirm()" vs-color="danger" vs-type="gradient">Alert Primary</vs-button>
  </div>
</template>

<script>
export default {
  data:()=>({
    activeConfirm:false
  }),
    methods:{
      openConfirm(){
      this.$vs.dialog({
        type:'confirm',
        color: 'danger',
        title: `Confirm`,
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        accept:this.acceptAlert
      })
      },
      acceptAlert(color){
        this.$vs.notify({
          color:'danger',
          title:'Deleted image',
          text:'The selected image was successfully deleted'
        })
      },
    }
}
</script>

그리고 또
terminal

npm run serve

이런 느낌.

위치가 안 좋아요.
App.vue

<script>
変更なし
</script>

<style>
.centerx {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    height: 200px;/*高さ*/
    text-align: center;/*中央寄せ*/
}
</style>

이런 느낌.

그리고 누르면 대화상자가 나와요.

Accept 를 클릭합니다.

오른쪽 아래 모서리에 삭제 이미지가 표시됩니다.

똑같이 다른 콘솔을 하고 있으면...

이것 나도 해보고 싶다.

아이구

모든 것을 설치해야 하기 때문에stylus-loader참조이 문장.
결과

위치가 안 좋은 건 귀여워서.

github 페이지 주세요.

참고문
vue.config.js

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/sax/'
    : '/',
  outputDir: 'docs',
};

vue.config.js
이후 응용 프로그램에서 호출됩니다.
manifest.json
컨텐트를 상대 경로로 변경
manifest.json

{
  "name": "sax",
  "short_name": "sax",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",//点をつける
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",//点をつける
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",//点をつける
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

우리 하나 짓자.

npm run build

완성
정말 최고야!!