三端兼容项目

npm 包

npm install --save axios

npm install --save vuex

npm install --save moment

npm install --save pubsub-js

npm install --save vue-lazyload

npm install --save swiper

npm install --save vue-awesome-swiper

npm install --save better-scroll

npm install stylus stylus-loader --save-dev

npm install --save-dev babel-plugin-component        // 样式选择性打包

npm install --save px2rem-loader  lib-flexible        // 阿里的 lib-flexible 自动计算单位，px2rem-loader 自动转换成 rem

npm install --save muse-ui        // muse-ui

三端兼容 px ， 参考 这里，还有 这里，--------------------------------------------------------------------------------------------------

 

-------------------------------------------------------------------------------------------------------------------------------------------------------

npm install element-ui --save        // element ui 引入及配置 main.js 添加三行

按需引入 npm install babel-plugin-component -D

主题配置

npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install style-loader --save-dev

npm install sass-resources-loader --save-dev

打开build文件夹下面的webpack.base.config.js

• module: { 
  　　　　rules: [ 
  　　　　　　　　　　{ 
  　　　　　　　　　　　　test: /\.vue$/, 
  　　　　　　　　　　　　loader: 'vue-loader', 
  　　　　　　　　　　　　options: vueLoaderConfig
  　　　　　　　　　　}, 
  　　　　　　　　　　{ 
  　　　　　　　　　　　　test: /\.js$/, 
  　　　　　　　　　　　　loader: 'babel-loader', 
  　　　　　　　　　　　　include: [resolve('src'), 
  　　　　　　　　　　　　resolve('test')] 
  　　　　　　　　　　}, 
  　　　　　　　　　　{
  　　　　　　　　　　　　 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
  　　　　　　　　　　　　 loader: 'url-loader', 
  　　　　　　　　　　　　 options: { 
  　　　　　　　　　　　　　　　　limit: 10000,
  　　　　　　　　　　　　　　　  name: utils.assetsPath('img/[name].[hash:7].[ext]')
                               } 
                   }, 
  　　　　　　　　　　{ 
                      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                      loader: 'url-loader', 
                      options: { 
                                 limit: 10000, 
                                 name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                              } 
                   }, 
  　　　　　　　　　　{ //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass! 
                       test: /\.scss$/,
                       loaders: ["style", "css", "sass"]
                    } 
                 ] 
             }

小坑：

1. transform 的参数为非整数时，会使得内容变模糊。

2. vue 是单页面应用，但是 PC 端经常会有新标签打开的需求

下面这种方法即可实现新标签打开组件页面，

需要注意的是，配置路由时，一定要写 name 字段！！！

3. axios.get 后者是 axios.post 需要设置 headers 时的完美 ajax 封装：

• /**
   * Created by kjf on 2019-04-05.
   *
   * axios.request(config)
     axios.get(url[, config])
   axios.post(url[, data[, config]])
     axios.delete(url[, config])
     axios.head(url[, config])
     axios.options(url[, config])
     axios.put(url[, data[, config]])
     axios.patch(url[, data[, config]])
   */
  import axios from "axios"
  
  export default function (url, data={}, method="GET", headers) {
    return new Promise((resolve, reject) => {
      let promise = null;
      if(method==="GET"){
        promise = axios.get(url, {params: data, headers})
      }else if(method==="POST"){
        promise = axios.post(url, data, {headers})
      }
      promise
        .then(response=>resolve(response))
        .catch(err=>{
          // console.log("/src/axios/ajax.js----error: "+err)
          reject(err)
        })
    })
  }

4.

So that's it.