一、Vue安装与配置
1.1 node.js安装
根据电脑系统，分别安装32位或64位node（node文件夹中安装文件即是）。一直点击下一步即可，安装过程中会默认将node添加到系统变量中。 安装完成后，打开cmd(可通过’win+r’打开运行，在其中输入’cmd’后回车即可)，在其中输入’node -v’ 查看node版本。若输出版本号，即证明安装成功。若出现’node非内部或外部命令’等类似提示信息，查看系统变量中是否添加了node。
1.2 Vue-cli 脚手架安装
npm的安装源在国外，所以速度会很慢。可以将npm的安装源修改为淘宝镜像。修改方法为在cmd中输入‘npm config set registry https://registry.npm.taobao.org’。输入后回车等待即可。
修改后即可输入下方代码，安装脚手架。
npm install -g vue-cli
1.3 通过脚手架创建项目
vue init webpack 项目名
创建项目之前会询问你项目相关信息，信息如下：
? Project name sell //设置项目名称
? Project description sell app //设置项目描述
? Author Martyr //设置作者
? Vue build standalone //使用标准的文件或是压缩过的文件（标准）
? Install vue-router? Yes //是否安装vue-router（路由）
? Use ESLint to lint your code? No //是否使用语法检查器（检查十分严格）
? Pick an ESLint preset Standard //用何种（选择标准即可）
? Set up unit tests NO //是否使用单元测试
? Setup e2e tests with Nightwatch? No //是否使用e2e测试
? Should we run `npm install` for you after the project has been cre
ated? (recommended) npm //是否需要现在通过npm或yarn帮你配置项目，或是稍后你自己动手安装
安装完成后出现运行项目的相关提示：
cd sell //进入cell文件夹
npm start //运行项目
下一步我们只需要输入cd sell (sell为项目名，输入你自己创建时的项目名即可)，进入项目文件后输入npm start 即可。
注意：输入‘npm start’后，会弹出vue的欢迎页面（若未弹出，则可以手动在浏览器中localhost:8080）
二、Vue项目目录详解
2.1 目录结构
通过vue-cli初始化项目后，目录结构如下：
在src文件夹下，我们可以看到main.js（页面入口js文件）,App.vue（页面级vue组件）,以及components（组件目录）文件夹下的Helloworld.vue这三个文件夹
.main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '',
components: { App }
})
在main.js中，1~3行通过import来引入所需要的组件。其中Vue是我们写Vue代码所必须的组件，其中包含了Vue.js中我们所需的各种内容。第二行的App则是我们自己写的组件，也就是我们从App.js中导出的组件。至于第三行的router，则是我们的跳转页面的路由。我们稍后的内容里会介绍路由的使用。
APP.vue:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view>
</div>
</temlate>
<script>
export default {
name: 'app'
}
</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>
App.vue中所写的代码就是我们自己编写的组件了。
一个vue组件，主要的构成有三个部分，分别是template，script，style。这三个标签里：
template标签里写html代码，且template直接子级只能有一个标签（有什么内容）。此处标签为路由的标签。
style标签里写CSS样式（内容长什么样），
script里面写Javascript代码（有什么功能）。
至于HelloWorld.vue也是我们自己编写的组件。就不做赘述了。
2.2 路由制作
用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，路由决定了页面的跳转。当你要把vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
你可以简单的理解成，在vue-router中共有两种标签，它们分别是：
<router-link tag="div" to="/weather"></router-link>
router-link 组件，用来导航。
标签中的tag属性作用是设置该router-link 组件在页面中被渲染成什么标签。
标签中的to属性作用是设置该router-link 组件在页面中导航至哪里。
<router-view></router-view>
路由匹配到的组件将渲染在这里
