1.新建 .gitignore 输入

    1. dist
    2. node_modules

    2.

    1. npm init -y
    2. npm i webpack webpack-cli -S

    3.新建 webpack.config.js

    4.修改package.json 文件
    image.png

    5.初次打包

    • 新建src文件夹
      • 新建文件index.js
        • 输入console.log(“hello world”)
    • 在webpack.config.js中输入
    1. const path = require('path')
    2. const config = {
    3.     entry:path.join(__dirname,'src/index.js'),
    4.     output:{
    5.         /* 打包的文件名 */
    6.         filename:"[hash]-[name]-bundle.js",
    7.         /* 打包文件的输出目录 */
    8.         path:path.join(__dirname,'dist')
    9.     },
    10.     mode:"development"
    11. }
    12. module.exports = config;
    • 输入 npm run build

    6.配置plugins

    • 安装 npm i html-webpack-plugin -S
    1. 导入HtmlWebpackPlugin
    2. plugins:[
    3.     new HtmlWebpackPlugin({
    4.         title:"webpack打包"
    5.     })
    6. ]

    • 输入 npm run build

    • 安装 npm i clean-webpack-plugin -S

    1. 导入{CleanWebpackPlugin}
    2. plugins:[
    3.     new HtmlWebpackPlugin({
    4.     title:"webpack打包"
    5.   }),
    6.   new CleanWebpackPlugin()
    7. ]
    • 输入 npm run build
    1. webpack-server
    • npm i webpack-dev-server -S
    • npm i cross-env -S
    • 配置package.json
    1. "scripts": {
    2.     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    3.     "serve":"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
    4.   },
    • 配置webpack.config.js
      1. const isDev = process.env.NODE_ENV ==='development'
      2. if(isDev){
      3.   config.devServer = {
      4.       port:8080,
      5.       host:'localhost',
      6.       overlay:{
      7.           errors:true
      8.       },
      9.       hot:true
      10.   }
      11. }
      12. //npm run serve

    8.loader

    • 处理vue \jpg|png\ css
    • npm i css-loader style-loader -S
    • npm i vue-loader vue vue-template-compiler -S
    • npm i file-loader -S
    1. const {VueLoaderPlugin} = require('vue-loader');
    2. const config = {
    3.     plugins:[
    4.         new VueLoaderPlugin()
    5.     ],
    6.     module:{
    7.         rules:[
    8.             {
    9.                 test:/\.css$/,
    10.                 use:[
    11.                     'style-loader',
    12.                     'css-loader'
    13.                 ]
    14.             },{
    15.                 test:/\.vue$/,
    16.                 use:'vue-loader'
    17.             }
    18.         ]
    19.     },
    20.     mode:"development"
    21. }

    9.配置src/index.js

    1. import Vue from 'vue';
    2. import '../assets/index.css';
    3. import App from './App.vue';
    4. const root = document.createElement("div");
    5. document.body.append(root)
    6. new Vue({
    7.     render:h=>h(App)
    8. }).$mount(root)

    配置src/App.vue

    1. <template>
    2.     <div>
    3.         hello world
    4.     </div>
    5. </template>
    6. <script>
    7. export default {
    8.     name:"App"
    9. }
    10. </script>
    11. <style scoped>
    13. </style>

    配置assets/index.css

    1. *{margin:0;padding:0}
    2. body{
    3.     background: red;
    4. }

    npm run serve

    10.请求网络数据
    index.js

    1. //npm i axios -S
    2. import Vue from 'vue';
    3. import '../assets/index.css';
    4. import App from './App.vue';
    5. import axios from 'axios';
    6. Vue.prototype.axios = axios;
    7. const root = document.createElement("div");
    8. document.body.append(root)
    9. new Vue({
    10.     render:h=>h(App)
    11. }).$mount(root)

    配置App.vue

    1. <template>
    2.     <div>
    3.         <div v-for="item of musics" :key="item.id">
    4.             <p>{{item.name}}</p>
    5.             <img :src="item.coverImgUrl" alt="">
    6.         </div>
    7.     </div>
    8. </template>
    9. <script>
    10. export default {
    11.     name:"App",
    12.     data(){
    13.         return{
    14.             musics:[]
    15.         }
    16.     },
    17.     mounted(){
    18.         var url = "http://192.168.14.49:3000/top/playlist?cat=日语"
    19.         this.axios(url).then(res=>{
    20.             this.musics = res.data.playlists;
    21.         })
    22.     }
    23. }
    24. </script>
    25. <style scoped>
    27. </style>