Vuejs de otra manera 4 (presentando vue)

Introduce vue.js

Ejecute el comando en el archivo especificado

npm install [email protected] --save

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\04-webpack配置vue>npm install [email protected] --save
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
    
    "os":"darwin","arch":"any"} (current: {
    
    "os":"win32","arch":"x64"})

+ [email protected]
updated 1 package in 17.419s

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\04-webpack配置vue>

Mensaje de error del proyecto de paquete

Atención en tiempo de ejecución
1.runtime-only -> en el código, no puede haber una plantilla
2.runtime-compiler -> en el código, puede haber una plantilla, porque hay un compilador que se puede usar para compilar

webpack.config.jsla nueva plantilla

  resolve: {
    
    
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
    
    
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

La diferencia entre el y template

Para poder reconocer el archivo vue, instálelo primero

npm install vue-loader vue-template-compiler --save-dev

Luego proceda al archivo de configuraciónwebpack.config.js

      {
    
    
        test: /\.vue$/,
        use: ['vue-loader']
      }

Intente cambiar la versión si algo sale mal

y luego ejecute el comandonpm install

enchufar

  plugins: [
      new webpack.BannerPlugin('最终版权归aaa所有'),
      new HtmlWebpackPlugin({
    
    
        template: 'index.html'
      }),
      new UglifyjsWebpackPlugin()
  ]

Complemento HTML del paquete

Ejecutar bajo el archivo correspondiente
npm install html-webpack-plugin --save-dev

F:\IdeaProjects\LearnVuejs04-v2\01-webpack的使用\05-webpack的Plugin>npm install html-webpack-plugin --save-dev

Modificación webpack.config.jsde
nuevo

const HtmlWebpackPlugin = require('html-webpack-plugin')

Complemento comprimido js

Ejecutar bajo el archivo correspondiente
npm install [email protected] --save-dev

Configurar un servidor local

Instalar primero

npm install --save-dev [email protected]

Luego proceda al archivo de configuraciónwebpack.config.js

  devServer: {
    
    
    contentBase: './dist',
    inline: true
  }

package.jsonañadir

    "dev": "webpack-dev-server --open"

Ejecutar comandonpm run dev