vue - cli 프로젝트 총화

4392 단어
1: 웹 팩 의 프로필 설정 경로 에서 그림 이나 js 파일 을 가 져 올 때마다 긴 파일 이름 을 쓰 지 않도록 합 니 다.
방법: 웹 팩. bash. config. js 파일 에 경 로 를 설정 하 는 별명
  resolve: {
    alias: {
      'static': path.resolve(__dirname, '../static'),
      'components': path.resolve(__dirname, '../src/components'),
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    },
  }

__dirname 은 현재 설정 파일 의 절대 경로 입 니 다. 뒤쪽 경 로 는 이 경로 에 대한 값 입 니 다.
 
2: 프로젝트 에 위 챗 을 도입 하 는 sdk 방법
1) weixin - js - sdk 설치 
          npm install --save-dev weixin-js-sdk
      2)  프로젝트 에 도입 하 다
          import wx from 'weixin-js-sdk'
 
 
3: remi 설정
1) postcss - pxtorem 설치
2) postcssrc. js 프로필 설정
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": {
      rootValue: 32,
      unitPrecision: 5,
      propWhiteList: [],
      selectorBlackList: ['className'],
      replace: true,
      mediaQuery: false,
      minPixelValue: 2
    }
  }
}

  
 
4: 수요: 배경 에서 얻 은 데이터 에 대해 판단 처 리 를 한 후에 페이지 에 렌 더 링 해 야 합 니 다.
실현 방법:
1) 사용자 정의 필터
2) methods 를 써 서 데 이 터 를 처리 한 다음 템 플 릿 에서 호출 방법 으로 데 이 터 를 처리 합 니 다.
 1   methods: {  
 2     formatData (data) {
 3       if (data.indexOf('||') > -1) {
 4         let html = ''
 5         data.split('||').forEach((item) => {
 6           html += `

${item}

` 7 }) 8 return html 9 } else { 10 return data 11 } 12 } 13 }
1 // jade   
2 
3 
4 ul
5   li(v-for="(item, index) in commonInfo")
6     .info(v-html='formatData(item)')

 
 
 
5:  전역 적 으로 jquery 와 swiper 도입
1) index. html 페이지 에 jquery. min. js 와 swiper. min. js 를 도입 합 니 다.   swiper.min.css
2). eslintrc. js 에 전역 설정
module.exports = {
  root: true,
……
……
……
  'globals': {
    "Swiper": true,
    "$": true
  }
}

3) 각 페이지 에서 직접 사용 할 수 있 으 므 로 더 이상 도입 할 필요 가 없다

좋은 웹페이지 즐겨찾기