最近在做一个机遇vue.js的移动端项目，整个前端模块全部由自己搭建开发，整体上采用的是vue-cli搭建框架，然后在其基础上开发业务。以下文档均是在基于vue-cli生成的项目中做进一步配置等操作。

  1. 配置 babel-polyfill
  2. 配置 scss
  3. 使用 CDN 加载主要vue.js等库文件
  4. 使用 PostCSS
  5. 自定义组件

1. 配置 babel-polyfill

  1. 安装babel-polyfill， npm i --dave-dev babel-polyfill;
  2. 修改build/webpack.base.conf.js下的配置:
    • 在module.exports方法前加入以下函数，代码如下
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      const createLintingRule = () => ({
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter'),
          emitWarning: !config.dev.showEslintErrorsInOverlay
        }
      })
    • 在module.exports方法中的entry中配置:
      1
      2
      3
      entry: {
        app: ['babel-polyfill', './src/index.js']
      }
    • 在module.exports方法中的module/rules中配置:
      1
      2
      3
      4
      5
      6
      rules: [
        ...(config.dev.useEslint ? [createLintingRule()] : []),


        ...
      ]
    1. babel-polyfill的配置方法有很多种，网上提供了至少3种方法，可以根据自身项目需求进行配置。

2. 配置 scss

  1. 安装依赖:
    1
    2
    npm install node-sass --save-dev
    npm install sass-loader --save-dev
  2. 修改webpack配置:
  • 找到webpack.base.conf.js文件，修改如下配置:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // module/rules
    [
      ...
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
      ...
    ]
  1. 使用scss:
    在需要使用到scss的页面加上:
    1
    <style lang="scss" scoped type="text/css"></style>
  • *亲测第二步可以省去，项目也可以使用scss跑起来，建议还是加上，更多scss相关文档scss快速入门

3. 使用 CDN 加载主要vue.js等库文件

项目开发过程到，突然意识到，我都是使用import Vue from ...，import Axios from ...；然后Vue.use(Axios)的方式引入库文件，包括Vue.js,Vue-router.js,UI组件muse-ui等，这样一来，每次build的时候都会生成新的hash，由于项目初期上线频繁，导致这些体积更大的文件无法在用户浏览器缓存，每次都会加载新的文件。所以，就采用CDN的方式引入这些不会更改的库文件以及第三方组件，这样，即使频繁release，每次打包的也都是业务代码，不用重复打包这些大文件了，美滋滋。
but, how to do?

  1. 引入文件:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- 在生成的项目根目录下找到index.html，并做如下更改 -->
    <head>
      <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    </head>
    ...
    <body>
      <div id="app"></div>
      <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
      <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
      <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    </bosy>
    <!-- 这里，我使用muse-ui作为UI框架，当然少不了vue.js和vue-router.js -->
  2. 修改配置并使用:
    找到build/webpack.base.conf.js，在module.exports中做如下更改:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    module.exports = {
      ...
      entry: {
        app: ['babel-polyfill', './src/index.js']
      },
      // 加入这一行
      externals:{
        'vue': 'Vue',
        'vue-router': 'VueRouter'
      },
      ...
    }

    // 格式为 'aaa' : 'bbb', 其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter.
  3. 去掉原始引用方式:
    去掉入口js文件的import vue…, import vue-router …, 以及Vue.use(…)等代码，然后重新npm run build，就会发现构建之后的文件小了一大截，还不是美滋滋。

4. 使用 PostCSS

使用vue-cli构建的项目，现在已经将postcss作为初始配置加入其中了，生成的项目根目录下找到.postcssrc.js。即为postcss的配置文件，

  • postcss是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。
  • PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

5. 自定义组件

第三方组件帮了我们很大的忙，大大的提高了我们的开发效率，但是根据实际业务，自定义组件有时也是必须的。所以记录一下如何创建自定义vue.js组件。

  1. 创建.vue模板文件:
    在src/components目录下新建一个custom/目录，并创建modal.vue模板文件:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <template>
      <div class="modal" v-text="text"></div>
    </template>

    <script>
    export default {
      name: 'modal',
      data () {
        return {
          text: '自定义组件'
        }
      },
      mounted () {
        
      },
      methods: {
        
      }
    }
    </script>

    <style scoped lang="scss">

    </style>
  2. 继续在custom/目录下创建modal.js文件，用于对上述组件的安装、挂载:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    import myComponent from './modal.vue'

    const Modal = {
      install (Vue) {
        Vue.component('Modal', myComponent)
      }
    }

    export default Modal
  3. 使用:
  • 在需要用到该组件的地方引入:
    1
    2
    3
    import Modal from '../components/custom/modal.vue'

    Vue.use(Modal)