Vue-cli 이동단 레이아웃 및 애니메이션 사용 상세 정보

vue-cli(중점)
vue-cli는 vue 프로젝트를 관리하는 도구로 vue-cli를 사용하여 프로젝트를 신속하게 만들고, 프로젝트를 시작하고, 프로젝트를 컴파일하는 등 작업을 할 수 있습니다.
흔히 말하는 vue 가족 통지: vue-cli, vue-router, vuex, vue-resource.
vue의 단일 파일 구성 요소 확장자는.vue 파일은 vue-loader를 빌려야만 정상적으로 해석될 수 있습니다.
vue-cli 3(새 버전)
이전에 낮은 버전의 vue-cli를 설치했다면 명령줄이 실행됩니다.
npm uninstall vue-cli -g
설치
npm install -g @vue/cli
버전 확인
vue --version
항목 만들기
vue create myapp
명령 후에 미리 설정을 선택하도록 합니다. 기본default를 선택하면 됩니다. 수동으로 사용자 정의를 하고 npm 관리 패키지를 선택하십시오.
프로젝트를 만든 후 cd가 프로젝트에 들어가면runserve가 프로젝트를 실행합니다. 그러면 브라우저에서 효과를 볼 수 있습니다.
cd myapp
npm run serve
그리고 src 디렉터리에서 정상적인 개발 프로젝트를 하면 됩니다, src/main.js는 입구 페이지입니다.
//vue가 시작할 때 생산 알림을 생성하지 못하도록false로 설정합니다.
Vue.config.productionTip = false
프로젝트 개발이 끝나면 포장해야 한다
npm run build
dist 디렉터리에 있는 파일은 생산 환경의 파일입니다.
vue-cli 2 (구 버전)

#  ：  webpack   vue  
npm install vue-cli -g
vue init webpack-simple appname 
cd appname
npm install
npm run dev

npm run build

프로젝트 구조 및 파일 소개
public/index.html은 브라우저가 방문하는 입구 페이지입니다.
src 디렉터리에 저장된 것은 개발 환경의 파편화 파일입니다.
package.json
패키지에서요.json에 eslintConfig 속성이 있습니다. rules 규칙을 수정하고 프로젝트에서 console를 사용할 수 있도록 합니다.

"rules": {
 "no-console":"off"
}

프로젝트에서axios를 어떻게 사용합니까
vue에서는 보통 axios를 사용하여 요청을 하고 응답을 얻습니다.
npm install axios -S
npm install을 사용하여 의존 모듈을 다운로드할 때마다 매개 변수-S 또는 -D를 추가하는 것이 좋다
-S는 최종build를 포장할 때 axios의 원본 코드도 합친다는 것을 나타낸다.
package.json에는 dependencies와 devDependencies가 있는데 각각 생산 환경 의존과 개발 환경 의존을 나타낸다.

{
 dependencies:{}, # --save     -S
 devDependencies:{} # --save-dev     -D
}

//  axios
import axios from "axios";

//  ， ， ， 
axios.get('http://www.wyyijiaqin.com/').then(res=>{
 console.log(res.data)
})

vue.config.js의 설정
vue 프로젝트의 설정 페이지입니다. 프로젝트의 루트 디렉터리에 직접 만들어야 합니다.
myapp/
node_modules/
public/
src/
vue.config.js
프록시 에이전트
전방에서 다른 서버의 어떤 파일에 접근할 때, 같은 원본 정책의 문제로 인해 우리의 전방에서 다른 사람의 데이터를 얻지 못할 때, 우리는 에이전트의 방안을 사용하여 이 문제를 해결할 수 있다.
프로젝트 루트 디렉터리에서 vue를 만듭니다.config.js 파일, 쓰기:

module.exports = {
 devServer: {
 proxy:{
  "/api": {
  target: "http://www.wyyijiaqin.com",
  pathRewrite: { '^/api': '' },
  changeOrigin: true,
  }
 } 
 }
}

수정 vue.config.js 후, 먼저ctrl+c가 서비스를 종료한 후,npmrunserve가 서비스를 시작합니다.
그러면 vue에서/api에 접근할 때 실제적으로 크로스 액세스http://www.wyyijiaqin.com됐어

import axios from "axios";
export default {
 methods:{
 fn(){
  //  ， ， ， 
  axios.get('http://www.wyyijiaqin.com/').then(res=>{
  console.log(res.data)
  })
 },
 async fn2(){
  //  ， 
  var {data} = await axios.get('/api');
  console.log( data )
 }
 }
};

alias 별명
vue.config.js

const path = require("path");
function resolve (dir) {
 return path.join(__dirname, dir)
}

module.exports = {
 chainWebpack: config=>{
 config.resolve.alias
  .set('@$', resolve('src'))
  .set('assets', resolve('src/assets'))
  .set('$comp', resolve('src/components'))
 }
}

별칭 사용
import HelloWorld from "$comp/HelloWorld.vue";
수정 vue.config.js 이후 npm run serve
sass 환경
npm install sass-loader node-sass --save-dev
그리고 vue 파일에서:

<style scoped lang="scss">
$bg : yellow;
body{
 div{
 background: $bg;
 }
}
</style>

물론 js 파일에서도 import를 사용하여 scss 파일을 가져올 수 있습니다
이동단 레이아웃
rem 단위
import 'js/rem.js';
rem.js 파일을 도입하면 css에서 rem 단위를 직접 쓸 수 있습니다. 이동단 장치를 변경할 때 너비가 같은 비율로 업데이트됩니다.
예를 들어 UI가 준 디자인 원고의 폭은 750px인데 그 중에서 어떤 그림의 폭은 375px이고 사용자의 핸드폰 폭이 750이면 보이는 그림은 375이다.그러나 사용자의 휴대전화가 1500일 경우 750을 표시해야 하며 등비 축소가 필요하다.
만약 UI가 준 디자인 원고의 폭이 750px라면, 우리는rem.js에서 실행한 함수의 매개 변수를 750으로 설정해야 합니다. 이렇게 하면 디자인 원고의 100px는 1rem와 같습니다.
flexbox 레이아웃
신축성 박스 레이아웃은 기본적으로 가로 분배 공간입니다. 세로 분배를 하려면flex-direction:column을 설정해야 합니다.

div{
 display: flex;
 justify-content: space-around;
 align-items: center;

 li{
 text-align:center;

 a{
  color:white;
  text-decoration: none;
 }

 .router-link-exact-active{
  color: green !important;
 }
 }
}

글꼴-awesome 글꼴 아이콘
import './assets/font-awesome-4.7.0/css/font-awesome.min.css';

애니메이션
전환 전환
Vue는 DOM을 삽입, 업데이트 또는 제거할 때 다양한 방식으로 전환 효과를 적용합니다.
transition은 vue가 제공하는 구성 요소입니다. 이 구성 요소의 역할은 하위 노드에 애니메이션 효과를 추가하는 것입니다.

<style>
 @import url(https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css);
 
 .toast{ 
 transform: translate(-50%,-50%); 
 position: fixed; 
 left: 50%;
 top: 50%; 
 background:black;
 color:white;
 }
</style>
<div id="app">
 <button @click="fn"> </button>
 <transition
 enter-class=""
 enter-active-class="animated fadeIn"
 enter-to-class=""
 leave-class=""
 leave-active-class="animated fadeOut"
 leave-to-class=""
 >
 <div class="toast" v-if="isShow">Toast</div>
 </transition>
</div>
<script> 
 var app = new Vue({
 el: '#app',  
 data:{
  isShow:true,  
 },
 methods:{
  fn(){
  this.isShow = !this.isShow;
  }
 }
 })
</script>

해석:toast에 대응하는div가 페이지에 만들어졌을 때transition은 이div에enter와 관련된 css 스타일을 추가합니다.toast이div가 페이지에서 삭제되었을 때transition은 이div에leave와 관련된 css 스타일을 추가합니다.transition 구성 요소는 애니메이션 설정을 하는 구성 요소입니다.
v-if와 v-show는 모두 애니메이션을 실현할 수 있다.
:duration='10000'은 밀리초 단위로 애니메이션 시간을 설정할 수 있습니다.
enter-class는 첫 번째 프레임 이후에 삭제되었습니다.
enter-to-class는 과도의 종료 상태에 들어가는 것을 정의합니다.요소가 삽입된 후 다음 프레임이 적용됩니다. (이와 동시에 v-enter가 제거됨) 전환/애니메이션이 끝난 후에 제거됩니다.
transition-group
transition은 0개 또는 1개의 하위 노드만 있을 수 있고,transition-group은 0개 이상의 하위 노드가 있을 수 있다.
렌더링을 순환할 때 키를 써야 하며, 키의 값은 유일한 식별자입니다. (그룹으로 표시하지 마십시오.)

<div id="app">
 <input type="text" v-model="str" />
 <button @click="fn2"> </button>
 <transition-group
 enter-class=""
 enter-active-class="animated fadeIn"
 enter-to-class=""

 leave-class=""
 leave-active-class="animated fadeOut"
 leave-to-class=""
 >
 <li v-for="(item) in arr" :key="item.id">
  {{item.val}}
  <input type="button" @click="fn3(item.id)" value="del" />
 </li>
 </transition-group>
</div>
<script> 
 var app = new Vue({
 el: '#app',  
 data:{
  str : "",
  arr : []  
 },
 methods:{
  fn2(){
  this.arr.push({"val":this.str, "id":new Date().getTime()});
  },
  fn3( id ){
  var ind = this.arr.findIndex(obj=>obj.id===id);
  this.arr.splice(ind, 1)
  }
 }
 })
</script>

갈고리 함수
애니메이션 리셋 함수(갈고리 함수), 애니메이션이 실행되는 과정에서 자동으로 터치되는 함수.
transition에 쓸 수도 있고,transition-group에 쓸 수도 있습니다.

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>

갈고리 함수는 두 그룹으로 나뉜다.
enter는 노드를 만들기 전에 자동으로 실행하고, 노드를 만드는 과정에서 자동으로 실행하며, 노드를 만들 때 자동으로 실행하고, 노드를 만들 때 취소할 때 자동으로 실행합니다.
leave는 노드를 삭제하기 전에 자동으로 실행되고, 노드를 삭제하는 과정에서 자동으로 실행되며, 노드를 삭제하면 자동으로 실행되고, 노드를 삭제하면 취소될 때 자동으로 실행됩니다.

methods: {
beforeEnter: function (el) {
console.log(‘ ', el)
},
enter: function (el, done) {
console.log(‘ …', el)
setTimeout(()=>{ //  ， done()， 。
done() //  
}, 2000)
},
afterEnter: function(el){
console.log(‘ ', el)
},
enterCancelled: function(el){
console.log(‘ ', el)
}
}

EventBus 중앙 이벤트 버스
복잡한 구성 요소 관계에서 데이터 유지 보수 문제를 해결하다.
다음은 웹팩이 관리하는 vue 프로젝트에서 EventBus의 쓰기 방법입니다.
eventbus.js

import Vue from 'vue'
const eventbus = new Vue();
export default eventbus;

main.js
import eventbus from './eventbus.js'
Vue.prototype.$eventbus = eventbus
모든 구성 요소 A(이벤트 수신)
mounted(){ this.$eventbus.$on("fnName", function(payload){ }) }
모든 구성 요소 B(트리거 이벤트)
this.$eventbus.$emit("fnName", {a:2})
이상의 이 Vue-cli 모바일 레이아웃과 애니메이션 사용에 대한 상세한 설명은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.