Detailed explanation for novices learning Vue-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation for novices learning Vue

php中世界最好的语言

Mar 10, 2018 am 09:35 AM

study newbie Detailed explanation

This time I will bring you a detailed explanation for novices learning vue. What are the precautions for novices learning vue. The following is a practical case, let’s take a look.

One of the best frameworks for vue currently

First of all, we follow the official website’s documentation

#Special attention

Vue.js does not support IE8 and its The following version, because Vue.js uses ECMAScript 5 features that IE8 cannot emulate. Vue.js supports all ECMAScript 5-compatible browsers.

Change logThe change log of each version can be found on GitHub.

npm

It is recommended to use NPM installation when building large applications with Vue.js. NPM works well with module packagers such as Webpack or Browserify. Vue.js also provides supporting tools to develop single-file components.

# Latest stable version

$ npm install vue

Command line tool CLI

Vue.js provides an official command line tool that can be used to quickly build large single pages application. The tool provides out-of-the-box build tool configuration, bringing a modern front-end development process. It only takes a few minutes to create and launch a project with hot reloading, static checking on save, and a production-ready build configuration:

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project
$ npm install
$ npm run dev

Copy after login

Special Note!!!!!!

## The #CLI tool assumes a certain level of familiarity with

Node.js

and related build tools. If you're new to Vue, we highly recommend reading through the guide without a build tool and getting familiar with Vue itself before delving into the CLI. After following the process

will appear

Related files
Folder

Detailed explanation for novices learning Vue .babelrc

is the configuration of babe , our code is es6, compiled into es5 through babe's presets

presets are presets

Introduction to project files

build and config are related to webpack configuration

node_modules are installed by us through npm The dependent code library
src directory is where we store the source code of the project. All the code we develop will be placed in the src directory

The static folder is where third-party file resources are stored

//.editorconfig 编辑器的配置charset = utf-8 //编码indent_style = space //缩进的风格indent_size = 2 //缩进的大小是两个end_of_line = lf //换行符的风格insert_final_newline = true //创建一个文件,会自动插入新行trim_trailing_whitespace = true //会自动移除行尾的多余空格

Copy after login

. eslintignore: Ignore the syntax check

After understanding the project file, let’s understand how the current code runs

index.html is the

entry file
index We know that his js and css will be dynamically inserted into this page

Also look at the dom structure,

There is only one APP tag under the body

He actually It is a vue component
The entrance JS of our page is actually this main.js
There is a red line marked here. It is a compiler problem. It can be recognized by adjusting it to es6 syntax

import Vue from &#39;vue&#39;import Vue from &#39;./App&#39;new vue ({  el: &#39;body&#39;
  components:{App}
})

Copy after login

We can see that this entry file relies on two

vue, js library

and one is App.vue. It can be simply written directly as App

and then pass new Vue Instantiate a vue

el:'body' is a mounting point, mounted on a body

components:{App}Registers a current App plug-in. This syntax is an abbreviation of es6, corresponding to With es5 App:App can simplify our writing through the writing method of es6. We know that this app corresponds to this app.vue

. Then let’s take a look at app.vue

which is divided into