Delete test.js
modify index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> <script src="dist/bundle.js"></script> </body> </html>
newly added App.vue file , Use IDEA newly build , If not, in Setting->plugin Install in vue plug-in unit
App.vue
<template>
<!-- template Write in structure -->
<div>
<h2 class="title">{{message}}</h2>
</div>
</template>
<script>
// Export the default object There's data in it JS
export default {
name: "App",
data(){
return {
message: 'hello vue!'
}
}
}
</script>
<!--style Write in style -->
<style scoped>
.title{
color: blue;
}
</style>
modify main.js
import Vue from 'vue'
import App from './js/App.vue'
const app = new Vue({
el:'#app',
// Use at the same time el and template After compiling , Will directly template Replace index.html Medium <div id="app"></div>
template:'<App></App>',
// Certified components App
components:{
App
}
})
Packaging operation
Wrong report
D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue>npm run build > [email protected] build D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue > webpack Hash: 85ff48d981147aa56b17 Version: webpack 3.6.0 Time: 689ms Asset Size Chunks Chunk Names bundle.js 347 kB 0 [emitted] [big] main [0] (webpack)/buildin/global.js 509 bytes {0} [built] [2] ./src/main.js 526 bytes {0} [built] [6] ./src/js/App.vue 279 bytes {0} [built] [failed] [1 error] + 4 hidden modules ERROR in ./src/js/App.vue Module parse failed: D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue\src\js\App.vue Unexpected token (1:0) You may need an appropriate loader to handle this file type. | <template> | <!-- template Write in structure --> | <div> @ ./src/main.js 7:11-34 npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] build: `webpack` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ext.zhangyugen1\AppData\Roaming\npm-cache\_logs\2021-06-03T12_25_48_996Z-debug.log D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue>
It's a clear default webpack They don't know us .vue Of documents , It's time to install loader 了
npm install vue-loader vue-template-compiler --save-dev
stay webpack Of loaders Not found in , Just copy it
Execution and installation
D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue>npm install vue-loader vue-template-compiler --save-dev npm WARN [email protected] requires a peer of [email protected]^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of [email protected]^4.0.0 || ^5.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"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\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] + [email protected] added 15 packages from 42 contributors and audited 507 packages in 10.795s 13 packages are looking for funding run `npm fund` for details found 11 vulnerabilities (2 low, 9 moderate) run `npm audit fix` to fix them, or `npm audit` for details D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue>
Installation successful
modify webpack.config.js To configure
// Need from node Introduction of dependency Dependency environment needs to be added
const path = require('path');
module.exports = {
// Configure source code packaging location
entry: './src/main.js',
// Configure the target location
output: {
// path Only absolute path can be written Can't write relative path But don't just write dead , Need to get the file location dynamically
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
// increase .vue Of documents loader
{
test: /\.vue$/,
use:['vue-loader']
}
]
},
// Use runtime-compiler
resolve:{
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
}
}
Run pack
Wrong report
D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue>npm run build > [email protected] build D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue > webpack Hash: 6a02c4ef842477436db3 Version: webpack 3.6.0 Time: 859ms Asset Size Chunks Chunk Names bundle.js 353 kB 0 [emitted] [big] main [0] (webpack)/buildin/global.js 509 bytes {0} [built] [2] ./src/js/App.vue?vue&type=script&lang=js& 174 bytes {0} [built] [3] ./src/main.js 526 bytes {0} [built] [7] ./src/js/App.vue 1.22 kB {0} [built] [1 error] [8] ./src/js/App.vue?vue&type=template&id=3ea74058&scoped=true& 469 bytes {0} [built] [failed] [1 error] [9] ./src/js/App.vue?vue&type=style&index=0&id=3ea74058&scoped=true&lang=css& 432 bytes {0} [built] [failed] [1 error] + 5 hidden modules ERROR in ./src/js/App.vue?vue&type=style&index=0&id=3ea74058&scoped=true&lang=css& Module parse failed: D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue\node_modules\vue-loader\lib\index.js!D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue\src\js\A pp.vue?vue&type=style&index=0&id=3ea74058&scoped=true&lang=css& Unexpected token (22:0) You may need an appropriate loader to handle this file type. | | | .title{ | color: blue; | } @ ./src/js/App.vue 4:0-87 @ ./src/main.js ERROR in ./src/js/App.vue?vue&type=template&id=3ea74058&scoped=true& Module parse failed: D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue\node_modules\vue-loader\lib\index.js!D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue\src\js\A pp.vue?vue&type=template&id=3ea74058&scoped=true& Unexpected token (2:0) You may need an appropriate loader to handle this file type. | | <!-- template Write in structure --> | <div> | <h2 class="title">{{message}}</h2> @ ./src/js/App.vue 1:0-94 @ ./src/main.js ERROR in ./src/js/App.vue vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. @ ./src/main.js 7:11-34 npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] build: `webpack` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ext.zhangyugen1\AppData\Roaming\npm-cache\_logs\2021-06-03T12_38_17_651Z-debug.log D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue>
This mistake should be vue-loader The version is too high , You need to install additional plug-ins to use
We reduce vue-loader The version is 13.0.0
adopt package.json As you can see, it's now 15.9.7, Greater than 14 Plug ins are required for all versions of , So we install 13 Version of
With ^ It starts with this version , If you find If you don't find it, look back , But not bigger than the big version at the beginning
It is amended as follows
If you modify it directly package.json The version in the file , Instead of installing it alone vue-loader And the specified version can be run directly
npm install
He'll automatically follow package.json File installation corresponding version environment
Carry out orders
After execution
IDEA No more warnings for this version
Run packaging again
D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue>npm run build > [email protected] build D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue > webpack { parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. Hash: f3cf394903e0c5ba7cea Version: webpack 3.6.0 Time: 1133ms Asset Size Chunks Chunk Names bundle.js 364 kB 0 [emitted] [big] main [0] (webpack)/buildin/global.js 509 bytes {0} [built] [2] ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/js/App.vue 166 bytes {0} [built] [3] ./src/main.js 526 bytes {0} [built] [7] ./src/js/App.vue 1.83 kB {0} [built] [8] ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3ea74058","scoped":true,"hasInlineConfi g":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/js/App.vue 1.58 kB {0} [built] [9] ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3ea74058","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loa der/lib/selector.js?type=styles&index=0!./src/js/App.vue 286 bytes {0} [built] [14] ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-3ea74058","hasScoped":true,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0 !./src/js/App.vue 497 bytes {0} [built] + 8 hidden modules D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simplevue>
Package successfully , function
As you can see, yes id='app' Of div It was replaced directly
author ： Dance on the other side
Time ：2021\06\07
It's about ：VUE
This article belongs to the author's original , Without permission , No forwarding
Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .