Vue.js入门

Web 小时候可胖了 20℃ 0评论

一、背景

公司里人最近都很忙,领导推的一个需求需要别的团队支持,但是别的团队没有人力,于是这部分活就落到了某的头上,这其中就包括前端页面。

话说某是真正的JAVA研发工程师,想着拿已有的页面改吧改吧,也没啥难的。但是看到代码的一刹那,蒙住了。这目录结构咋看着跟手头的JAVA项目差不多?原来,这就是Vue。

闲话不说了,开始学吧!

二、开始学习

Vue.js是啥?是一个前端开发库,常用于构建大型应用。

百度了一番Vue入门,搜到了“https://www.runoob.com/vue2/vue-tutorial.html”这个,于是趁着不紧急,草草的撸了一遍,感觉还能理解。回头看了一下公司项目,还是有点云里雾里。

公司那群人应该自己封装了一套,启动的时候都不知道环境是怎么选的,先不管了。看了这几天,感觉最绕的还是component,父子传递、挂载的,有点晕,所以周末再回顾一下。

三、关于安装方式

https://www.runoob.com/vue2/vue-install.html,看教程的这一页。有三种安装方式,归一下类,其实是两个:一个是纯页面的方式,一个是NPM方式。

1、纯页面的方式

请直接看代码,HelloWorld走起

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

?

(注:代码来源见代码中的网址)

2、NPM是啥?

说到NPM,就得回头看看Node.js。JS本来属于前端语言,只能在浏览器上干一些事,后来谷歌的Chrome V8(JS)引擎出世,大大提升了JS的执行效率,这使得通过JS来写后端代码(Node.js)成为可能。

NPM全称是Node Package Manager,直白点说,就是Node的包管理器。感觉类似于Java的Maven,pom.xml对应这里的Package.json。

管理的是啥包呢,有jQuery、BootStrap等。

具体参考:https://blog.csdn.net/qq_38261174/article/details/90290318、https://www.runoob.com/nodejs/nodejs-npm.html

3、Vue.js和Node.js什么关系?

Node.js是js的运行环境,类似于JVM之于Java。

Vue.js是库,使用了基于HTML的模板语法,允许开发者采用简洁的模板语法来声明式的将数据渲染进DOM的系统。是数据驱动。

总结:Node.js是用js开发服务端应用,Vue.js是为了让前端人员开发页面更容易。

四、学习中

1、Vue.js的项目目录结构

目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
  • main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式

(注:来自https://www.runoob.com/vue2/vue-directory-structure.html)

?2、待补充

?

?

转载请注明:九层楼 » Vue.js入门

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址