1. Vue file
The. Vue file, known as single file component, is a file format customized by Vue.js. A. Vue file is a separate component, which encapsulates the component related code: html, css, JS
The. vue file consists of three parts: template, style, and script
<template>
html
</template>
<style>
css
</style>
<script>
js
</script>2. vue-loader
The browser itself does not think of the. vue file, so the. vue file must be loaded and parsed. At this time, the vue loader is required
Note that Vue loader is web based
3. webpack
webpack is a front-end resource templating loader and packaging tool, which can use and process all kinds of resources as modules
In fact, web pack is to load and package these resources through different loader s, and then output the packed files
In short, a web pack is a module loader. All resources can be loaded as modules, and finally the output can be packaged
[official website] (http://webpack.github.io/)
webpack version: v1.x v2.x
Webpack has a core configuration file: webpack.config.js, which must be placed in the root directory of the project
4. Example, steps:
4.1 create a project with the following directory structure:
webpack-demo
|-index.html
|-main.js Entry file
|-App.vue vue file
|-package.json Engineering documents
|-webpack.config.js webpack configuration file
|-.babelrc Babel configuration file
4.2 write App.vue
<template>
html
</template>
<style>
css
</style>
<script>
js
</script>4.3 installation of relevant formwork
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D webpack Own server
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install vue-template-compiler -D //Precompiled templateConsolidation:
cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler4.4 write main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
render:function(h){
return h(App);
}
})
4.5 write webpack.config.js
module.exports={
//Configure portal file
entry:'./main.js',
//Configure portal file output location
output:{
path:__dirname, //Project root path
filename:'build.js'
},
//Configure module loader
module:{
rules:[
{
test:/\.vue$/, //All files ending in. vue are loaded by vue loader
loader:'vue-loader'
},
{
test:/\.js$/, //All files ending in. js are loaded by the Babel loader, except for node_modules
loader:'babel-loader',
exclude:/node_modules/
}
]
}
}4.6 write. babelrc
{
"presets":[
["env",{"module":false}]
]
}4.7 write package.json
Run cnpm install initialization
Change the test line to
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8800"
//Change this line
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.6",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.6.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"vue": "^2.5.13"
}
}4.8 operation test
npm run dev
