1.配置文件目录

在根组件下配置一个components文件夹，在文件夹下创建一个login组件

  1. <template>
  2.  <div>
  3. 这是一个登录组件
  4.  </div>
  5. </template>
  7. <script>
  8.  export default {
  9.  name:'',
  10.  data () {
  11.  return {
  13.  }
  14.  },
  15.  components: {
  17.  }
  18.  }
  19. </script >
  21. <style scoped lang="less">
  24. </style>

2.配置加载机

安装：

  1. npm i vue-loader@15.4.2 vue-template-compiler@2.6.11

安装vue-loader和 vue-template-compiler(默认情况下不支持import方式引入.vue文件，需要安装下面两个文件).

在webpack.config.js中配置

  1. 1.引入VueLoaderPlugin插件(在vue-loader15版本以后需要配置这个)
  2. const VueLoaderPlugin = require('vue-loader/lib/plugin');
  1.    2.配置VueLoaderPlugin插件
  2. plugins: [ 
  3.      new VueLoaderPlugin()
  4.     ],
  1.  3.处理 .vue 文件的 loader   
  2.  { test: /\.vue$/, use: 'vue-loader' }
  1. // 导入处理路径的模块
  2. var path = require('path');
  3. // 启用热更新的 第2步
  4. const webpack = require('webpack')
  5. //帮我们把html配置到内存中，把打包后的bundle.js注入到html中
  6. var htmlWebpackPlugin = require('html-webpack-plugin');
  8. const VueLoaderPlugin = require('vue-loader/lib/plugin');
  10. // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
  11. module.exports = {
  12.     entry: path.resolve(__dirname, 'src/main.js'), // 项目入口文件
  13.     output: { // 配置输出选项
  14.         path: path.resolve(__dirname, 'dist'), // 配置输出的路径
  15.         filename: 'bundle.js' // 配置输出的文件名
  16.     },
  17.     mode:'development',
  18.     devServer: { 
  19.         // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
  20.         //  --open --port 3000 --contentBase src --hot
  21.         open: true, // 自动打开浏览器
  22.         port: 3000, // 设置启动时候的运行端口
  23.         contentBase: 'src', // 指定托管的根目录
  24.         hot: true // 启用热更新 的 第1步,只更改修改部分
  25.       },
  26.       plugins: [ // 配置插件的节点
  27.         new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
  29.      // 添加plugins节点配置插件
  30.      new htmlWebpackPlugin({
  31.         template:path.resolve(__dirname, 'src/index.html'),//模板路径
  32.         filename:'index.html'//自动生成的HTML文件的名称
  33.     }),
  34.      // 2.配置VueLoaderPlugin插件
  35.      new VueLoaderPlugin()
  36.     ],
  38.     module: { 
  39.         rules: [ 
  40.             // 匹配以.css结尾的文件
  41.             { test: /\.css$/, use: ['style-loader', 'css-loader'] },
  42.             //处理css文件的规则
  43.             { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  44.             { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  45.             {   test: /\.(ttf|eot|svg|woff|woff2)$/,
  46.                 use: [
  47.                     {
  48.                         loader:'url-loader'
  49.                     }
  50.                 ]
  51.             }, // 处理 字体文件的 loader
  52.             { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  53.               //3.处理 .vue 文件的 loader
  54.               { test: /\.vue$/, use: 'vue-loader' } 
  55.         ]
  56.     },
  57.     resolve: {
  58.         alias: {
  59.            'vue$': 'vue/dist/vue.js'
  60.         }
  61.     }
  62. }