How do I install vUE

NPM install -g@vue /cli # or YARN global add @vue/cli # Check version after complete vue --version # Create a directory named hello-world vue create Hello-world # Complete the configuration as required # Go to the directory CD hello-world # Start webpack-dev-serve yarn serveCopy the code

Differences between finished and incomplete versions

  • Vue. Js full version

    • Development use (runtime version + compiler) (compiler: template string compiled into JS rendering function code), large volume, not recommended, you can get views from HTML.

  • Vue.runtime.js non-complete version

    • The release uses vue-loader in webpack to call pomliler and convert it into h() function, so it is small in size and fast in loading

Template and render are used

//main.vue
<template>
  <div id="app">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>
Copy the code
// Use Vue Loader in webpack. // It allows you to write Vue components in a format called single-file components (SFCs) import Demo from './main.vue' new Vue({render(h){h(Demo)}})Copy the code

Using vue-loader and the render function, you can make a partial version without a compiler perform the full version’s functions

Vue-loader can extract template, CSS, and Script codes from templates and send them to the corresponding loader for processing

Vue instance

A Vue instance, like a jQuery instance, encapsulates all operations on the DOM and all operations on data.

Then you can manipulate the DOM, like listening for events, changing the DOM, manipulating data, adding, deleting, changing, and looking up data.

Vue instances do not encapsulate Ajax and need to use axiOS’s Ajax capabilities.

Single file component

In many Vue projects, we use Vue.com Ponent to define global components, followed by new Vue({el: ‘#container ‘}) to specify a container element within each page.

This approach works well for many small to medium sized projects where JavaScript is only used to enforce specific views. But in more complex projects, or when your front end is entirely javascript-driven, the following disadvantages become obvious:

  • Global definitions enforce that names in each component must not be repeated

  • String templates lack syntax highlighting and use ugly \ when HTML has multiple lines

  • No CSS support (No CSS support) means that CSS is conspicuously left out when HTML and JavaScript are componentized

  • No build step restricts the use of HTML and ES5 JavaScript to preprocessors such as Pug (formerly Jade) and Babel

Single-file Components with a.vue file extension provide a solution to all of these problems, and build tools like Webpack or Browserify are also available.

<template> <p>{{n}} World! </p> </template> <script> module.exports= f data: function (){ return {n:0} } </script> <style scoped> p{ font-size: 2em; text-align: center } </style>Copy the code

SEO is not friendly

Curl cannot obtain the url because the page content is generated by JS. Therefore, you need to set the TITLE keyword description attribute so that Curl can obtain the information for search engine optimization.

<meta name= "Description" Content= "Keywords" > <meta name= "Description" Content= "Description" >Copy the code

How to write Vue code with CodeSandbox

CodeSandbox makes it easy to quickly initialize projects like Vue, React, Angular, etc

  1. First of all to enterCodeSandboxFor the official website, click on the upper right cornerCreate Sandbox

  1. Choose Vue and enjoy your coding journey!

  2. Select save

  3. To Export the code to the ZIP File, choose File > Export to ZIP