Vue 入门指南
2017-01-06 本文已影响271人
程序员长春
环境安装
- 安装NodeJS
下载链接：NodeJS官方网站 - 安装Vue-CLI
CLI-Command Line Interface，老司机想了半天，发现这个就是DOS命令窗口，不知道是不是微软改名部的杰作。
输入命令：
npm -install -g vue-cli
模板安装
到这儿 VueJS 官方模板 查看有哪些现成的模板可以使用。
由于某个官方指南页面的误导，我安装了Webpack模板，所以下面我们只谈Webpack，其他的有空再说。
- 安装Vue webpack template
$ vue init webpack myapp
将出现如下界面，会有一些提问，如实回答即可，不知道问啥的话就回答Y好了，全部回答N电脑可能会中病毒。
- 检查你当前的文件夹，比如我的是D:\Web\Vue，多了个MyAPP文件夹，里面多了一堆文件和文件夹。
开始工作
- 让代码跑一会儿
<pre>
$ npm install
$ npm run dev</pre>如果我解释这两句命令的话，今天就不用做别的事情了。NPM Install官方文档 。
npm run dev 执行后，将开启NodeJS服务器，并自动开启浏览页面
点击查看源代码
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.JS</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/app.js"></script>
</body>
</html>
</pre> - 不懂装懂，黑盒试错修改大法
2.1 第一步，修改Index.html
Sublime打开MyApp文件夹，如下图
我们注意到Index.html和上面的源代码只差一行
<script type="text/javascript" src="/app.js"></script>
作为一个学习过好几年COPY/PASTE修改网页代码的程序员，我们试着修改
<Title>Vue.JS</title>为
<Title>Vue.JS 欢迎您！</title>
Webpack和NodeJS搭档的好处是，你在Sublime按下保存，网页即时进行刷新，按Alt+Tab回到Chrome浏览器，看看效果。
2.2 开始Vue相关代码的修改
网页Body里面只有一句
<div id="app"></div>
为什么我们看到的却是有图片有文字的，这些内容在哪儿？
刚刚我们在Sublime左侧的文件树打了一个绿色的框，这里面的代码就是具体的项目代码。
App.vue
<template>
<div id="app">
<hello>Hello World!</hello>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Hello.vue， 在components文件夹
<pre>
代码太长了....我就不复制粘贴了。
如果你学过html的话，应该知道，我们在浏览器看到的
大部分文字，Hello.vue文件里面都能找得到。
当然，没学过HTML，也能找到。
</pre>
你可以试着修改，并保存看看。
你想学Vue语法？ 官方文档
