vue安装及使用

vue中文网站：https://cn.vuejs.org/v2/guide/installation.html  包含了安装、使用、api、视频。

一. 什么是 Vue

　　Vue 是一个前端框架，特点是
　　　　数据绑:　比如你改变一个输入框 Input 标签的值，会自动同步更新到页面上其他绑定该输入框的组件的值

 

　  　　 组件化: 　页面上小到一个按钮都可以是一个单独的文件.vue，这些小组件直接可以像乐高积木一样通过互相引用而组装起来

 

　　下载vue.js

开发或学习：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

二. vue安装步骤

　　 1.  安装node.js。

　　　　    官网下载地址：https://nodejs.org/en/download/  

　　　　　检测PATH环境变量是否配置了Node.js，“windows+r” 快捷键  输入"cmd" => 输入命令：path，输出如下结果（ctrl+f 在当前页面搜索 通用）：　　

  　　　　　　 PATH=C:\Program Files\nodejs\;
　　　　　　　　C:\Users\rg\AppData\Roaming\npm
　　　　　说明安装成功
　　　　　检查Node.js版本：node-v　　　　　npm包管理器是集成在Node.js中　　　　　　　　　　
　　　　　查看npm的版本命令：npm -v

     　　　　

　　　　　　（7）输入命令npm -g install npm，更新npm至最新版本

　　　　　　　　查看版本   npm -v  

　　2.安装公服-淘宝镜像（cnpm）

　　　使用淘宝 NPM 镜像。cnpm 命令代替默认的npm命令，增加依赖包加载速度且避免资源限制。 

　npm install -g cnpm --registry=https://registry.npm.taobao.org

　　3.安装webpack

　　　　cnpm install webpack -g

　　4.安装vue脚手架

　　　　npm install vue-cli -g
　　　（安装失败的解决方法   npm cache clean --force）

　　　　会有一些初始化的设置，如下输入:
　　　　Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)
　　　　Project name (vue-test)直接回车默认
　　　　Project description (A Vue.js project) 直接回车默认
　　　　Author 写你自己的名字

　　5.安装 vue 路由模块vue-router和网络请求模块vue-resource

　　　　cnpm install vue-router vue-resource --save

　　　启动项目

　　　　npm run dev