写点什么

VUE 第一个项目怎么读懂

发布于: 2020 年 10 月 05 日
VUE第一个项目怎么读懂

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">    <!--<img src="./assets/logo.png">-->    <router-view/><!--default is Helloworld.vue-->  </div></template>
<script>export default { name: 'App' //export 了名为App的组件,main.js就可以找到它了}</script>
复制代码


上面的 template 都理解为 html 的一部分片断就行了,片断可以拼接到 html 对应的位置,构成一个有内容的完整的页面。\<img src="./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 等其他框架。什么框架都没用过直接上手完全没障碍。


发布于: 2020 年 10 月 05 日阅读数: 97
用户头像

总结 分享 收获 2020.08.17 加入

公众号“MySQL从删库到跑路”作者 最纯粹的技术 最高级的享受

评论

发布
暂无评论
VUE第一个项目怎么读懂