vue-cliプロジェクトのまとめ

1:webpackでの設定ファイルのパスは、画像やjsファイルを導入するたびに長いファイル名が書き込まれないようにします.
方法:webpack.bash.co.nfig.jsファイルにパスの別名を配置します.

  resolve: {
    alias: {
      'static': path.resolve(__dirname, '../static'),
      'components': path.resolve(__dirname, '../src/components'),
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    },
  }

同前dirnameは現在のプロファイルの絶対パスで、後のパスはこのパスに対する値です.
 
2:プロジェクトにWeChatのsdkを導入する方法
1)weixin-js-sdkをインストールする 
npm install--save-dev weixin-js-sdk
2) プロジェクトに取り入れる
import wx from'weixin-js-sdk'
 
 
3:配置rem
1)postcs-pxtoemのインストール
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.ページでjquery.min.jsとswiper.min.jsを紹介します.   swiper.min.css
2)グローバルを構成する.

module.exports = {
  root: true,
……
……
……
  'globals': {
    "Swiper": true,
    "$": true
  }
}

3)各ページで直接使用できます.これ以上導入する必要はありません.