introduce

Vue. Js (vUE for short) is a progressive open source JavaScript framework for creating user interfaces, as well as a Web application framework for creating single page applications. Pages can be created in the form of componentization, and the structure of individual components is very clear. Component templates, logical operations, data locations, and function hooks are handy to use.

How to create a single page application

Creating a single page application can be done using scaffolding vue-CLI, script introduction, or webpack setup.

  • vue-cli
Vue create Vue-project generates a VUE project based on configuration. Vue UI configures a VUE project based on visualizationCopy the code
  • webpack

Webpack configuration requires plug-ins and loader to build the environment, CSS-loader, style-loader, VUe-loader, HTMl-webpack-plugin, Babel, webpack-dev-server and other major plug-ins, As well as some auxiliary plug-ins, optimization project plug-ins.

Webpack.config.js module.exports = {// define the entry file: './ SRC /index.js', // define the packaged file output: {filename: '[name].[hash:5].js', path: path.resolve(__dirname, './dist'), publicPath: '/' }, module: { rules: [ { test:/\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] }, { test: /\.vue$/, exclue:/node_modules/, use: [ { loader: 'vue-loader' } ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html' }), new vueLoaderPlgun() ] }Copy the code
  • Script introduction
<html>
<head>
<script src="vue.js"></script>
</head>
<div id="app"><div>
<script src="othermodule.js"></script>
<script src="othermodule.js"></script>
</html>

Copy the code

What happens when you create a VUE

const vm = new Vue({ render: h= > h(template) }).$mount('#app')
Copy the code

Here we can see that creating a single page application is essentially generating an instance of a Vue method, passing in some parameters, calling the $mount method on Vue and passing back an object with data, methods, Lifecycle, etc.

function Vue(options) {
   if(process.env.NODE_ENV ! = ='production' && !(this instanceof Vue)) {
       warn ('Vue is constructor and should be called with new keyword')}// init to initialize options
   this._init(options)
}
// initMixin initializes mixin
initMixin(Vue) 
// State is mixed
stateMixin(Vue)
// Time is mixed
eventsMixin(Vue)
// Life cycle mixin
lifecycleMixin(Vue)
// Render mixin$.mount(renderMixin(Vue))'#app') This methodCopy the code

We know from this sequence that it’s not going to be mounted to the app element until it’s initialized.