Getting started with 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 d477f9ce7bf77f53fbcf36bec1b69b7a tag is surrounded by html code; the 3f1c4e4b6b16bbbd69b2ee476dc4f83a is surrounded by js code, and ES6 syntax can be used. The content within c9ccee2e6ea535a969eb3f532ad9fe89 is the css code. The code to use this component is in app.vue. Just declare the tag in the script first

<template>
    <div class="hello">
      <h1>{{ 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 './components/Hello'
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组件，未来需要一些篇幅去详细说明它们。