Vue.js学习笔记（一、安装）

简介

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

安装

独立版本

下载开发版本，文件名为vue.js:https://cn.vuejs.org/js/vue.js
下载完成后，像普通的js文件一样导入引用：

<script src="vue.js"></script>

  

 

  
1
 

这种方法用起来还是比较爽的，可以对数据实现双向绑定，可以应付一般的前后端分离，但是使用vue官方的脚手架创建单独的前端工程项目，可以做到和后端完全独立开发和部署，后端单独部署一个纯restful的服务，而前端直接采用nginx来部署，这种称为完全的前后端分离架构开发模式

使用 CDN 方法

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  

 

  
1
 

三个CDN地址：
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

*unpkg：*https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

NPM 方法

官方推荐——
用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

前提

npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

安装稳定版

新建一个目录vue_demo，在目录下执行npm命令，由于npm比较慢，所以使用了cnpm镜像。

# 最新稳定版
$ cnpm install vue

  

 

  
1
  
2
 

命令行工具 (CLI)

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack vue_project
# 这里需要进行一些配置，默认回车即可

  

 

  
1
  
2
  
3
  
4
  
5
 

至此，一个vue-cli项目就创建完成了。

进入项目，安装并运行：

#安装
$ cnpm install
#运行
$ cnpm run dev

  

 

  
1
  
2
  
3
  
4
 

安装和运行完成。
访问地址：http://localhost:8080/#/

Vue.js 不支持 IE8 及其以下 IE 版本。

参考：

【1】、https://www.runoob.com/vue2/vue-install.html
【2】、https://vuejs.org/v2/guide/syntax.html
【3】、https://cn.vuejs.org/v2/guide/installation.html
【4】、https://cli.vuejs.org/

文章来源: blog.csdn.net，作者：三分恶，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/sinat_40770656/article/details/97368911