I. Construction project

(1) Method 1: Use @vue/ CLI

Website cli.vuejs.org/zh/guide/in…

1. Global installation

2. Create projects

Hello-world is the project name, which can be changed as required

3. Select the configuration

Select according to actual development situation

Run Linter at commit time

What unit tests to use

Where is the configuration file stored

Enter the file and run

(2) Method 2: Use Webpack

(ii) VUE version

Official documentation cn.vuejs.org/v2/guide/in…

1. Use the CDN for installation

① Complete version vue.min.js

Get the view from the HTML,

www.bootcdn.cn/vue/

Add a link to index.html

Control from main.js

Or just add template

② Incomplete version

Build the view with JS, vue.runtime.js

Control from main.js

Add button event

Using the vue – loader

Vue single file component

1. The new demo. Vue

<template> <div> {{n}} < button@click ="add">+1</button> </div> </template> <script> export default {data() {return {n:0}}, Methods :{add(){return this.n+=1}}} </script> </style scoped> </style>Copy the code

2. Import in main.js

Import Vue from 'Vue' import demo from './demo.vue' new Vue({el: '#app', // render(h) {return h(demo)}})Copy the code

Using loader is not SEO friendly

SEO Fundamentals

Curl is search engine optimization. Curl is a search engine that uses curl to get the main content of a page. The solution is to place thetitle.description.keyword.h1.aAnd so the main content is written

The difference between incomplete and complete versions

html{{n}} ==> html 0
this.n+=1 ==> html1
Copy the code

The complete version is large in size and powerful in function. The compiler is used to convert variables containing V-if and V-for into real DOM nodes. When n is used for the second time (this.n+=1), DOM nodes directly change the value of N. External tools, such as Webpack, are needed

conclusion