VUE介绍

VUE是前端开发框架。
原始的前端开发须要工程师写html、写css、写javascript(js)。js是脚本语言，浏览器能够运行js来执行一些js反对的动作，例如点击反馈，下拉菜单、操作html的DOM元素之类。这样开发效率很低。
起初诞生了一些前端开发框架，VUE就是其中之一。目前在国内前端开发，特地是手机APP的H5页面的开发中，被很多公司采纳。
应用VUE开发的时候，不须要js间接操作html的DOM元素元素，只须要治理js的变量值，html会自动更新这些值（双向绑定）。大量语句就能够实现原始形式大量编码能力实现的性能。

IDE介绍

VUE开发的IDE少数用visio stdio code（VScode）。VScode自身只是编辑器，编译类语言须要本人配编译环境。
前端开发不须要配编译环境，只须要把必须的各种库、工具在VScode自带的命令行界面装置就行。具体过程网上搜“从零开始搭建vue我的项目”。

工程目录构造介绍

刚建设好的我的项目肯定是上面这种目录构造（ranktable.vue是后加的，请疏忽）

第一次建设工程难免会懵，啥都没写就进去这么多文件，岂但数量不少，文件品种还多。
学习VUE别想一下吃的太多，除非自身前端经验丰富。否则先看懂红色箭头的几个文件吧，看懂这几个就算入门了。看的程序严格依照上面这样。

  1. index.html
  2. main.js
  3. App.vue
  4. index.js
  5. HelloWorld.vue

我将这几个文件大略讲一讲，你就能有个清晰的脉络了。

index.html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <title>tradedatapy</title>  </head>  <body>    <div id="app"></div>    <!-- built files will be auto injected -->  </body></html>

页面开发当然是要有html了，VUE开发也不例外。这个html就是整个我的项目的入口了。<body>外面就一个元素，<div id="app"></div>示意本html绑定了一个id为app的VUE对象。

main.js

new Vue({    //new Vue语句就是定义了一个VUE对象  el: '#app',  //vue对象的id是app  router,  components: { App },  //vue的组件名是APP  template: '<App/>'     //template 名是APP})

请看正文，定义了一个app的VUE对象，index.html就能够找到它了。

App.vue

<template>  <div id="app">    <!--![](./assets/logo.png)-->    <router-view/><!--default is Helloworld.vue-->  </div></template><script>export default {  name: 'App'    //export 了名为App的组件，main.js就能够找到它了}</script>

下面的template都了解为html的一部分片断就行了，片断能够拼接到html对应的地位，形成一个有内容的残缺的页面。![](./assets/logo.png)这句被我正文了，否则页面会显示这个图片的。上面的<route-view/>局部是路由，依据用户的url不同，会路由到不同的vue文件，进而展现不同的页面内容。

index.js

我的项目里有不只一个index.js，这里解说的是router目录下的index.js.

//这里的配置决定了App.vue里<router-view/>地位会展现什么内容export default new Router({  routes: [    {      path: '/',   //当用户拜访http://localhost:8080/根目录也就是默认目录会被路由到HelloWorld组件，                    //这个组件的所有内容会被在App.vue里<router-view/>显示进去      name: 'HelloWorld',      component: HelloWorld    },    {//当用户拜访http://localhost:8080/ranktable会显示ranktable.vue内容    //ranktable.vue是我后加的      path: '/ranktable',      name: '/ranktable',      component: ranktable    }  ]})

HelloWorld.vue

最初看看这里有什么

<template>  <div>    原来的内容被我删除了，当初页面显示这句话。  </div></template><script></script>

vscode命令行执行npm run dev，看见上面阐明胜利了，将地址贴进浏览器

Compiled successfully in 983ms                                                      15:43:26 I  Your application is running here: http://localhost:8080

如果想要更简单的性能，在helloworld.vue实现就行了，比方我要一个填表查问性能，外面改成

<template>  <div>    <group title="城市">      <selector placeholder="请抉择城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"></selector>    </group>    <group title="街道">      <selector placeholder="请抉择街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"></selector>    </group>    <group title="小区">      <selector placeholder="请抉择小区" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"></selector>    </group>    <group title="日期">      <selector placeholder="请抉择日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"></selector>    </group>    <group title="统计类型">      <selector placeholder="请抉择统计类型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"></selector>    </group>    <div style="padding:15px;">      <x-button type="primary" @click.native="getValue('plainValueRef')">查问</x-button>    </div>  </div></template><script>import { Selector, Group, Cell, CellBox, XButton } from 'vux'此处省略很多货色</script>

这个例子有点简单，须要上面<script>里实现一些函数，引入vux的一些组件，vux是挪动端的UI框架，和VUE配合应用的。成果是这样的

总结

对使用者的要求是html，css，JavaScript基本知识必须要有，但不要求用过jQuery等其余框架。什么框架都没用过间接上手齐全没阻碍。