vue学习整理

1、webpack+vue自定义路径别名

 

　　vue-cli 用的是webpack，也可以使用webpack自定义别名这个功能，自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径，直接使用自定义别名就可以找到文件的位置。

 

设置方法：

 

**设置地址：**build文件夹下面的webpack.base.conf.js文件 
具体设置：

 

    

resolve: {
    extensions: ['.js', '.vue', '.json'],
     alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//增加这一行代码
        }
    },

 使用方式：

使用的时候要像下方截图的B处一样前面要加上一个’~’，这里的webstorm虽然提示报错，我们可以不用管，代码运行是正常的。

 

2、加载不同类型的模块，配置module.rules

加载不同类型的模块，配置module.rules

module.rules制定了一系列不同文件格式的加载方式和解析方式

module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader','css-loader'],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }

每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)。

• 这其中rules数组就是loader用来的匹配和转换资源的规则数组。

• test代表匹配需转换文件的正则表达式。

• 而use数组代表用哪些loader去处理这些匹配到的文件。

• 此时再运行webpack，打包后的文件bundle.js就包含了css代码。

• 其中css-loader负责加载css，打包css到js中。

• 而style-loader负责生成：在js运行时，将css代码通过style标签注入到dom中。