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

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

1. 配置 babel-polyfill

  1. 安装babel-polyfillnpm 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)