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



  
    
    
    tradedatapy
  
  
    

页面开发当然是要有html了,VUE开发也不例外。这个html就是整个项目的入口了。里面就一个元素,

表示本html绑定了一个id为app的VUE对象。

main.js

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

请看注释,定义了一个app的VUE对象,index.html就可以找到它了。

App.vue



上面的template都理解为html的一部分片断就行了,片断可以拼接到html对应的位置,构成一个有内容的完整的页面。![](./assets/logo.png)这句被我注释了,否则页面会显示这个图片的。下面的部分是路由,根据用户的url不同,会路由到不同的vue文件,进而展示不同的页面内容。

index.js

项目里有不只一个index.js,这里讲解的是router目录下的index.js.

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

HelloWorld.vue

最后看看这里有什么


vscode命令行执行npm run dev,看见下面说明成功了,将地址贴进浏览器

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

如果想要更复杂的功能,在helloworld.vue实现就行了,比如我要一个填表查询功能,里面改成


这个例子有点复杂,需要下面