截图有新有旧，就不整理了；步骤都差不多，主要是版本不一样。
资源：
1.Vue.js2.0从入门到放弃---入门实例（一）
2.Vue.js入门学习（一）
3.Vue官方中文Api文档
4.如何搭建一个vue项目(完整步骤)
5. vue.js开发环境搭建
一、前期准备（node,npm）
#下载node.js：https://nodejs.org/en/
//安装node
//查看node版本
$ node -v
//安装npm
# 最新稳定版
$ npm install vue
//如果有些资源被屏蔽，可以安装国内镜像cnpm
$ npm install -g cnpm --registry=http://registry.npm.taobao.org
//检查是否安装成功cnpm
$ cnpm -v
版本检查.png
二、搭建vue项目环境
2.1 直接引入vue.js到项目中
//来源：https://v2.cn.vuejs.org
#引用js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
//在新建的文件夹中安装vue
$ npm install vue
#页面完整案例
<!doctype html>
<html>
<head>
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<div id="app01" v-bind:title="title">鼠标移动上去，出现文字</div>
<script>
var data = new Vue({
el:'#app',
data:{
message:'hello,myself vue'
}
})
var data = new Vue({
el:'#app01',
data:{
title:'你好'
}
})
</script>
</body>
</html>
2.2 使用vue-cli 搭建项目
//vue
#全局安装vue-cli
$ npm install --global vue-cli
or
$ npm install --g vue-cli
//创建一个基于 webpack 模板的新项目: vue init webpack 项目名
#创建vue项目
$ vue init webpack vue_mobile
//说明：一般都是回车确定就好。
# Vue build ==> 打包方式，回车即可；
# Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
# Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
# Set up unit tests ==> 是否安装 单元测试工具 如果我们不需要 可以n 回车；
# Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 如果我们不需要 可以n 回车；
//创建后，进入项目，运行
#cd 项目名称
$ cd vue_mobile
$ npm run dev
npm install01
npm install02
webpack01
webpack02
运行
现有文件中安装vue
现有文件中安装vue-结果
三、项目目录
项目目录
初始项目目录-新
运行后项目页面
四、安装依赖包资源
//npm
$ npm install
//cnpm，已经安装cnpm镜像
$ cnpm install
//假如安装依赖的时候报错，可以根据提示信息，重新安装依赖文件以及版本
//例如ajv@^6.0.0 依赖
$ npm install ajv@^6.0.0
依赖报错
手动安装依赖
依赖资源包展示
五、利用vue list 查看可用模板
image.png
