一、前言

在使用vue进行构建页面的时候，每个人书写的方式各不相同，导致相同的页面每个人书写出来的繁简不同，所以今天分享一下我所学会的vue技巧，当然，这对有经验的开发者来说肯定觉得这也需要说，这谁不知道，我只能说，你是你，我是我，你不是我！

二、抽离template

情景和思路： 在使用vue写页面的时候，如果页面极其复杂，书写的模板template肯定会书写很多内容，这样会在JS的文件之中看到很多的标签的嵌套，很是不爽，所以可以将其书写的模板内容进行抽离成一个单独的文件，然后再将模板进行导入，从而避免在js中出现过多的标签

举例说明： 如果我想把template抽离成为一个·template的文件

$QX(FZ_PB$9014G@5T{]QH0J.png$

推导： 在使用打包工具webpack进行打包的时候，打包不同的文件需要使用不同的loader去解析它，并做一些相关的配置，所以我需要按照规定找到一个loader去解析它，因为.template文件是我自定义的，所以我需要自定义一个loader，然后在webpack的文档中教你如何配置自定义的loader，所以我能得到以下解决方法：

首先在webpack.config.js中书写解析.template文件的规则

// 在配置文件的模块（module）配置项的规则（ruler）中添加以下代码
      {
        // 匹配以.template结尾的文件，
        // $在正则中表示末尾的意思
        test: /\.template$/, 
        use: [{
          // 表示使用什么loader来解析.template的文件，
          // 后面的字符串表示我自己自定义的loader存放的位置
          loader: path.resolve(
                                  __dirname, 
                                  '../loaders/template.loader.js'
                              ), 
        }],
      },

编写loader需要注意：

由于webpack是运行在nodejs上面的，所以loader也是运行在nodejs上的，所以在导入导出的时候需要使用commonjs规范。

因为在使用import语法导入的文件之前需要有文件是导出的，所以添加上export default用于导出文件

webpack规定loader是一个导出为一个函数的node模块

// 跟上面写的路径匹配，这里创建一个template.loader.js的一个文件，
export default = function(data) {
    // 在loader中不允许换行，所以用replace将换行替换掉
    return 'export default' + `\`${data.replace(/\n/g, '')}\``;
}

解决： 就可以将模板抽离出来成为一个单独的文件并且用一个合适的loader来解析它了

进阶： 既然可以将template抽离出来，其实也可以将一个页面需要的文件全部抽离出来（例如）

_1U3ED7E%IKLA44G2L5233R.png

我可以在src文件夹下面新建一个views的文件夹存放页面，将上面书写的页面进行拆分，使css、js、html相互独立便于控制，然后在我新建的views/index/JS文件中引入这个页面需要的css和template,再将这个JS文件导出，如果需要构建这个页面的话只需要实例化这个页面即可

SBDWS8KKO@RRGHR`QA}DDM9.png

结尾： 这样就可以将页面进行分开管理了，如果页面的那个地方出现问题，可以方便找到部分，并且实例化构建页面的时候可以按需构建，显得方便一点

三、简写路径

情景和思路： 在项目庞大的时候，可能大量导入一个文件夹里面的文件，这时候写路径可能要写很长，如果文件夹嵌套多层的话，那写路径可能就要掉眼泪了，这时候就想这些公共的路径我能不能简写呢，上面webpack可以自定义loader，那能不能让我自定义路径呢，其实是可以的，webpack的resolve配置项就可以实现

推导： 在resolve配置项中有一个属性alias属性，可以将使用频繁的目录进行一个简化的操作

  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src'), 
      // ../表示我在文件夹的最外层，
      // ../src就变成了访问src文件夹的路径 
      // ==> 从而可以推导出当我使用@符号的时候等价于我访问src文件夹
    },
  },

解决： 这样自己用符号自定义自己需要的路径了

vue基础--- 开发技巧

一、前言

二、抽离template

三、简写路径