1. Project configuration
1. Create an ID card file
2. Install webpack webpack-cli webpack-dev-server (global) tool
3. Install and configure vue vue-loader vue-template-compiler less-loader css-loader style-loader less
4. Build the project directory and change the configuration file
./ // Page file
<div ></div> <script src="dist/"></script>
./ //Identity card file
'dev':'webpack-dev-server'
./ //Configuration file
Configure webpack and webpack-dev-server, and can also be used through vcode plug-in
Configure vue-loader,
Configure less-loader
Configure vue alias
//Introduce the path path component and vueloader plug-in for nodeconst path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
= {
//Work mode mode: 'development',
//Entrance entry: ("./app/"),
//exit output: {
publicPath:'dist',
filename:""
},
module: {
//Configure loader rules: [{
test: /.jsx?$/,
include: [
(__dirname, 'app')
],
exclude: [
(__dirname, 'node_modules')
],
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
]
},
//Miscellaneous resolve: {
//Omit file format extensions: ['.json', '.js', '.jsx','vue']
},
plugins: [
//Use the vueloader plugin new VueLoaderPlugin()
]
};
./App/ //Entry fileimport Vue from "vue";
import App from "./";
new Vue({
el:"#app",
render(h){
return h(App)
}
})
./App/ //Root component<template>
<div>
Hello World
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
Run npm run dev
Wepack-dev-server has been started now, and the 127.0.0.1:8080 page can be updated in real time!!
Summarize
The above is a detailed explanation of the Vue Start (without cli) tutorial introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!