1-3 安装vue-loader

  1. cnpm i vue vue-loader vue-template-compiler -S

Tips:设置webpack.config.js之后,项目必须重新启动

  1. // webpack.config.js
  2. const {VueLoaderPlugin} = require("vue-loader")
  3. module.exports = {
  4.     module:{
  5.       rules:[
  6.           ...
  7.           {
  8.               test:/\.vue$/,
  9.               loader:'vue-loader'
  10.           }
  11.       ]  
  12.     },
  13.     plugins:[
  14.         new VueLoaderPlugin()
  15.     ]
  16. }
  1. // index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="app"></div>
  11. </body>
  12. </html>
  1. //main.js
  2. import './assets/index.css'
  3. import App from './App.vue';
  4. import Vue from 'vue';
  5. new Vue({
  6.     render:h=>h(App)
  7. }).$mount("#app");
  1. npm run build //将项目打包,打包之后的项目就可以上传服务器了
  2. npm run serve/yarn serve  //查看项目的运行效果