search
Homephp教程PHP开发Getting started with Vue.js
Getting started with Vue.jsNov 30, 2016 pm 04:53 PM
vue.js

Introduction

vue.js is a client-side js library that can be used to develop single-page applications. In order to select a project, I looked at angular, react, and vuejs one after another. I admired the first two and loved the latter. Because it is simple and clean, and it also has advanced web components implementation. Even if there isn't much documentation, I'd choose it. Next, we first create a starting project and go over the concepts and components involved in the development process.

vue.js

The development process of decent vuejs is almost always combined with webpack and babel. For those who like to hack from scratch, let me tell you that the configuration is extremely cumbersome. Fortunately, vue.js provides a tool called vue-cli. Can be used to quickly build the starting code for a single-page application. It only takes a minute to launch commonly used development features:

Scaffolding code available.

Hot reload. Automatically reload after component code is updated

Static code inspection.

ES6 language features

Tool preparation

We need to use vue-cli to create a scaffolding project.

Install vue-cli

$ npm install -g vue-cli

Confirm the node version

My version is

$ node -v

v5.0.0

$ npm -v

3.10.6

Many problems may occur if they occur It depends on the version, the suggestion is the same as mine.

Create a new project

Execution:

$ vue init webpack my-project

The second parameter webpack specifies to create a vuejs project based on the "webpack" template. This template will create a webpack scaffolding code.

However, what is webpack? It itself is a packaging tool that can package js, css, and image into one or more js files, and can support various loaders as plug-ins to convert different types of files. In fact, webpack uses the plug-in vue-loader to perform format conversion when loading Vue type files, and translates Vue type files into js files that the browser can recognize.

Attention for Chinese users: The vue init command uses npm. The npm warehouse is often slow or blocked. You can use domestic mirrors. Just edit ~/.npmrc and add the following content:

registry = https://registry.npm.taobao.org

This method can be much faster.

The currently available templates are:

webpack - Through webpack and the vue-loader plug-in, you can call babel to compile the .vue file into a js file that the client can recognize. Hot loading, code inspection, and testing can also be provided by default.

webpack-simple - The simplest webpack and vue-loader plugin.

browserify - Through the combination of Browserify + vueify, babel can be called to compile the .vue file into a js file that can be recognized by the client. Hot loading, code inspection, and testing can also be provided by default.

browserify-simple - The simplest Browserify + vueify plugin.

Theoretically, webpack and browserify have similar functions, and both can be used as packaging tools. But webpack is that popular tool that has very little documentation, but everyone is vying to use it. So, let’s not worry about it and use webpack first.

Install dependencies, go to http://localhost:8080 to check the effect.

View vue files

vue files are a trinity. That is to say, css, html, and js are all in one file, and they are separated using tags. In order to better view the structure, it is recommended to first install the highlight plug-in corresponding to the editor.

Install syntax highlighting

The editor I am accustomed to using is sublime text. Installing the plug-in can identify all vuejs component codes with the extension .vue and give them highlights to facilitate code reading and writing. This plug-in is called vue-syntax-highlight and is officially provided by vuejs. It's located at github.com. Just clone it into your Sublime package directory. On my computer, the Sublime package directory is /Users/lcj/Library/Application Support/Sublime Text 3/Packages, so the installation process is

$ cd my-project
$ npm install
$ npm run dev

and then restart. After reading the code, all files with a .vue extension will have corresponding highlights.

View vue

There is a component code in the starting code, which is in src/hello.vue. View:

cd /Users/lcj/Library/Application\ Support/Sublime\ Text\ 3/Packages
git clone https://github.com/vuejs/vue-syntax-highlight

The file is divided into three parts. The

<template>
    <div class="hello">
      <h1 id="nbsp-msg-nbsp">{{ msg }}</h1>
    </div>
  </template>
 
  <script>
  export default {
    data () {
      return {
        msg: &#39;Hello World!&#39;
      }
    }
  }
  </script>
 
  <style scoped>
  h1 {
    color: #42b983;
  }
  </style>

and then use the tag in the html

import Hello from &#39;./components/Hello&#39;
export default {
  components: {
    Hello
  }
}

A very big highlight! A vue file has all the internal js, css, and html, and can be used as a complete, self-contained component. A very interesting web component that I personally admire very much is here.

vue文件内的语法,当然不是浏览器所可以支持的,浏览器不认识它!魔术在于webpack+vue-loader+babel 。webpack加载vue文件首先调用vue-loader,vue-loader会调用babel转换ES6代码为ES5代码,把css和html作为模块也转换为客户端js代码。这些js代码浏览器就可以识别了。

另外,我们看看热加载。把hello组件的msg值改改。然后保存。浏览器会自动刷新的。这就是热加载了。对于频繁修改调试的程序员,有了热加载,得轻松不少。

安装chrome开发工具

我习惯使用的浏览器是chrome,可以安装vue的开发工具到chrome插件内。在chrome市场内查询vue-developertools 。有了它,可以在chrome console内看到更加友好的vue错误提示。

回归日常

我们所有的编辑修改一旦完成需要更新网站时,最终需要把所有的vue,ES6代码等编译出来到ES5的js文件。现在可以构建这些webpack代码:

npm run build

此命令会把我们已经有的开发成果,编译到dist目录下,就是说编译成前端可以直接使用的html、js、css。

有了它们,我就可以使用一个http 静态服务器,在dist目录内执行:

cd dist
npm install http-server -g
http-server

 

然后,到http://localhost:8080查看效果。和运行npm run dev看到的一模一样。

更多

vue还有两个插件,对开发者很有价值

加强版 ,访问服务器

npm install vue-resource --save

 

安装路由

npm install vue-router --save

细节展开

我们走马观花的看了webpack、vue-loader、babel 、vue组件,未来需要一些篇幅去详细说明它们。


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
总结分享几个 VueUse 最佳组合,快来收藏使用吧!总结分享几个 VueUse 最佳组合,快来收藏使用吧!Jul 20, 2022 pm 08:40 PM

VueUse 是 Anthony Fu 的一个开源项目,它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。本篇文章就来给大家分享几个我常用的几个 VueUse 最佳组合,希望对大家有所帮助!

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

聊聊Vue3+qrcodejs如何生成二维码并添加文字描述聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PM

Vue3如何更好地使用qrcodejs生成二维码并添加文字描述?下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述,希望对大家有所帮助。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

Github 上 8 个不可错过的 Vue 项目,快来收藏!!Github 上 8 个不可错过的 Vue 项目,快来收藏!!Jun 17, 2022 am 10:37 AM

本篇文章给大家整理分享8个GitHub上很棒的的 Vue 项目,都是非常棒的项目,希望当中有您想要收藏的那一个。

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何使用VueRouter4.x?快速上手指南如何使用VueRouter4.x?快速上手指南Jul 13, 2022 pm 08:11 PM

如何使用VueRouter4.x?下面本篇文章就来给大家分享快速上手教程,介绍一下10分钟快速上手VueRouter4.x的方法,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools