1.学习使用vue.js（适合初学者）

如果你不愿意多花时间去自学vue.js 官网的API，那么你可以在跟着下面的例子学习最实用，最容易上手的案例。

首先要你必须要去VUE官网上下载vue.js，然后才能继续下面的步骤。 
如果你不想下载的话，在有网络环境的情况下，也可以选择绝对路径的vue.js。

如果你想学习如何搭建webpack脚手架，那么请直接滑动到安装vue-cli

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1
当然，和vue的官网一样，不推荐新手直接安装vue-cli 
因为那样很容易把你绕晕。当然，如果你对node.js的构建工具比较熟悉的话，也可以直接安装vue-cli

下面正式进入vue的学习：

首先你引入了vue.js

<script src="./vue.js"></script>
1
然后你需要在html里面写一个大的盒子用来写你的整个vue的项目。

<div id="app"></div>
1
然后和vue建立关联

<script>
new Vue({
    el : '#app',
    data(){
        return {
            msg:'aaa'
        }
    },
    methods:{//methods 存放fn的地方；
        run(){
            alert('run')
        },
        hover(){
            alert('hover')
        }
    },
    mounted(){//相当于js里的window.onload
        this.run();//直接调用run函数；
        console.log(this)
    }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
下一篇：声明式渲染 和 指令绑定 
http://blog.youkuaiyun.com/heshuaicsdn/article/details/79196678

安装使用vue-cli 
（不推荐新手使用！如果想要试用vue脚手架，那么还是先去JS里熟悉熟悉VUE的相关方法，再来使用vue-cli会轻松许多，如果你以前使用过其他框架（如wx小程序），对你使用vue-cli有很大帮助）

首先，你需要下载安装node.js，如果你不确定安装没安装过node，执行node -v查看版本。如果没有显示 

那么你就必须去https://nodejs.org/en/ 
下载安装node.js 然后才能进行下面的操作；

在网上有好多版本，有直接用npm安装的，也有用cnpm安装的，有用webpack-simple的，也有用webpack的，我先说说安装webpack-simple（就是简易版的webpack,他需要自己配置路由，某些方面不如webpack兼容好）

安装vue-cli详细过程： 
搭建webpack脚手架 
1.新建一个目录；（为了方便，我就直接建在了桌面） 
 
然后cd进入这个目录； 
 
2.进入目录后像VUE官网说的： 
只需要执行： 
npm install vue 
安装最新版的vue

3.然后还要安装脚手架：vue-cli（VUE的脚手架工具） 
npm install -g vue-cli 
安装好后可以执行vue list 来看看我们可以用哪些模版； 

4.新建项目目录： 
如果你用webpack-simple模版可以执行： 
vue init webpack-simple hellovue

如果你用webpack模版可以执行：(推荐使用，不过下载过程会比webpack-simple长) 
vue init webpack hellovue

这里举得例子是“hellovue”，你可以写你自己的项目名称 
1

然后出现了一些选项： 
需要注意的是有一个问你是否使用 ESlint 语法，你选择no(因为这是一个更为严谨的语法，你如果代码风格不是特别严谨，最好还是选择no) 
然后其他都是yes,一路回车… 

然后静静的等待下载完成… 

下载好后根据提示执行命令： 

5.cd hellovue 
如果没有依赖环境，执行 
npm install 
安装依赖；

6.执行 
npm run dev

把红线部分，复制到浏览器的localhost 里；

要注意一下：package.json文件

这里的”vue”和“vue-router”是我们下载的包。

如：下载vue-router（路由）的时候：

npm install vue-router -S
1
当下载好以后，在你查看“package.json”里会多一个“vue-router”
--------------------- 
作者：heshuaicsdn 
来源：优快云 
原文：https://blog.youkuaiyun.com/heshuaicsdn/article/details/78949376