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 += `<p>${item}</p>` 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)在每个页面可以直接使用,不需要再引入了