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/[email protected]">script>

二. 安装node.js

　　 1.  下载node.js。

　　　　    下载地址：https://nodejs.org/zh-cn/   （或者https://nodejs.org/en/download/）  右上角有中文切换。

　　　　　  我下载了12.13.1长期支持版的。Linux 上安装 Node.js 需要安装 Python 2.6 或 2.7 ，不建议安装 Python 3.0 以上版本　　　　

　　　　　　

　　

　　　　（1）双击运行（run）安装包,等待安装。

　　　　　　

　　　　　（2）next>接受协议>选择安装路径

　　　　　　

 

　　　　（3）选择需要的模式

　　　　　　

　　　　　（4）选择install安装。

　　　　　　　　完成之后会弹出命令行窗口

　　　　　　

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

  　　　　　　 PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32; 　　　　　　　　C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\; 　　　　　　　　c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib; 　　　　　　　　C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\; 　　　　　　　　C:\Users\rg\AppData\Roaming\npm
　　　　　　　　说明安装成功

　　　　　（6）检查Node.js版本。　npm包管理器是集成在Node.js中了，所以在安装Node.js的时候就已经自带了npm，输入npm -v可得到npm的版本。

     　　　　　　

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

　　　　　　　　查看版本   npm -v  

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

　　　   大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。cnpm 命令代替默认的npm命令，增加依赖包加载速度且避免资源限制。 

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

　　　　这样就可以使用 cnpm 命令来安装模块了：

　 cnpm install [name]　

　　　　安装webpack

　　　　cnpm install webpack -g

　　　　安装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 写你自己的名字

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

　　　　cnpm install vue-router vue-resource --save

　　　启动项目

　　　　npm run dev