vuecli의 만지작거리며 필기를 처음 배우다

앞머리 반찬새가 최근에 vue-cli를 봤는데 기록을 잊어버릴까 봐요.
1. 인용 jquery에 대해 인터넷에서 많이 봤는데 마지막에 웹팩에서.base conf.js 에 코드 추가
a.var webpack = require('webpack');
b. module.exports에서 output과 같은 등급에plugins를 추가합니다

plugins: [
    new webpack.ProvidePlugin({ //jquery   
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
],
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'jquery': 'jquery'

    }
},

c.main.js에 import$from'jquery'를 추가하면 전역적으로 사용할 수 있습니다
2. 로컬 css를 인용하려면 js의 다른 설정은 src와 같은 등급의static 디렉터리에 두지 않았습니다
a. require('./static/bootstrap/3.0.3/css/bootstrap.min.css')용 페이지는 직접 Require에서 쓰면 됩니다.vue 파일의 경우, 그림 윤방의 플러그인, js 파일 flipsnap을 사용합니다.min.js</span></p>
<p><span style="font-family:'Microsoft YaHei';font-size:18px;color:#666666;"><br> var </span><span style="font-family:'Microsoft YaHei';font-size:18px;color:#ff0000;">Flipsnap</span><span style="font-family:'Microsoft YaHei';font-size:18px;color:#666666;">=require('../../static/flipsnap.min.js')<br>//이 명칭은 아래에서 사용한 방법과 일치해야 한다. 그렇지 않으면 계속 정의되지 않는다.br>  var flipsnap = </span><span style="font-family:'Microsoft YaHei';font-size:18px;color:#ff0000;">Flipsnap</span><span style="font-family:'Microsoft YaHei';font-size:18px;color:#666666;">('.inner', {<br>                  distance: imgsboxWidth<br>              });</span><br><span style="font-family:'Microsoft YaHei';font-size:18px;">3. html에 있는 그림을 직접 일반적인 경로로 쓰면 되는데 js동태를 통해 생성된 그림 경로는 < 때문인 것 같다.br> 웹 패키지 포장의 원인이 영향을 받았기 때문에 마지막으로 이 그림들을 static 디렉터리에 놓으면 </span></p>
<p><span style="font-family:'Microsoft YaHei';font-size:18px;"><br></span><span style="font-family:'Microsoft YaHei';font-size:18px;">4. 플러그인은dom에서 불러온 후에 실행해야 한다. 그의 코드는methods에 initHeadimgs 방법을 써서 mounted에서 실행한다. <br> .vu 파일의 초기화는 모두 여기에 적혀 있습니다.span></p>
<p><span style="font-family:'Microsoft YaHei';font-size:18px;"><br></span><span style="font-family:'Microsoft YaHei';font-size:18px;">5.   .vue 파일의 js 코드 </span><br></p>
<pre><code class="language-html"><script>
var Flipsnap=require('../../static/flipsnap.min.js')
export default{
data(){
let articles= new Array()
let topimgs=['../../static/img/tea1.png','../../static/img/tea2.jpg','../../static/img/tea3.jpg','../../static/img/tea4.png','../../static/img/renqi1.png']
return {articles,topimgs}
},
mounted:function(){
this.initHeadimgs();
this.findArticle();
},
methods:{
findArticle(){
var i={'headImg':'././static/ig/tea1.png','title':'제목','createTime':'2017-12-12'};
this.articles.push(i);
console.log(i);
},
initHeadimgs(){
var imgsboxWidth = $(".imgsbox").width();
$(".inner").css("width", imgsboxWidth * 5);
$(".inner>a").css("width", imgsboxWidth);
$(".all").css("width", imgsboxWidth);
$(".pointer span:nth-child(1)").addClass('color');
var $pointer = $('.pointer span');
//console.log(Flipsnap);
var flipsnap = Flipsnap('.inner', {
distance: imgsboxWidth
});
flipsnap.element.addEventListener('fsmoveend', function() {
$pointer.filter('.color').removeClass('color');//filter는 jquery의 필터로 지정한 표현식과 일치하는 요소 집합을 선별합니다
$pointer.eq(flipsnap.currentPoint).addClass('color');
}, false);
}
}
}
많은 문제들이 일시적으로 해결된 것에 한정되어 있고, 모두 아직 표면에 머물러 있으니, 나중에 천천히 이해하기를 바란다.