关于前端:VUE第一个项目怎么读懂

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

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

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

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

index.html
main.js
App.vue
index.js
HelloWorld.vue

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

<!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 对象。

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

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

<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，这里解说的是 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
    }
  ]
})

最初看看这里有什么

<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 等其余框架。什么框架都没用过间接上手齐全没阻碍。

关于前端:VUE第一个项目怎么读懂

VUE 介绍

IDE 介绍

工程目录构造介绍

index.html

main.js

App.vue

index.js

HelloWorld.vue

总结