Vue.js入门

时间 2019-11-16

标签 vue.js vue 入门栏目 JavaScript 繁體版

原文原文链接

1、背景

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

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

闲话不说了，开始学吧！vue

2、开始学习

Vue.js是啥？是一个前端开发库，经常使用于构建大型应用。node

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

公司那群人应该本身封装了一套，启动的时候都不知道环境是怎么选的，先无论了。看了这几天，感受最绕的仍是component，父子传递、挂载的，有点晕，因此周末再回顾一下。git

3、关于安装方式

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

一、纯页面的方式

请直接看代码，HelloWorld走起npm

<!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>

（注：代码来源见代码中的网址）json

二、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/9029031八、https://www.runoob.com/nodejs/nodejs-npm.html

三、Vue.js和Node.js什么关系？

Node.js是js的运行环境，相似于JVM之于Java。

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

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

4、学习中

一、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）

二、待补充

1. Vue.js入门
2. Vue.js的入门
3. vue.js 入门
4. vue.js入门
5. Vue.js入门 - 介绍
6. Vue.js简单入门
7. Vue.js入门教程
8. vue.js 入门基础
9. vue.js入门实例
10. Vue.js 入门教程
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用