vue-cli项目总结

1：在webpack的配置文件配置路径，避免每次引入图片或者js文件都写入很长的文件名

方法：在webpack.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： 配置rem

　　　　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）在每个页面可以直接使用，不需要再引入了