Vue.js 学习入门：介绍及安装

Vue.js 是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

详细讲解内容可见：一句话理解Vue核心内容 （这块内容之后再做个阅读笔记：见《一句话理解Vue核心内容》阅读笔记

环境搭建

1.下载 nodejs（http://nodejs.cn）；

• node -v 终端查看安装成功

• npm -v 查看npm版本安装成功

2.安装 vue 命令：npm install vue ；安装vue脚手架 ：npm install --global vue-cli

• vue脚手架(vue-cli) 可用于快速搭建大型单页应用。

使用 vue-cli 构建单页应用

 //1、全局安装Vue-Cli
  npm install -g vue-cli
 //2、进入创建项目目录下
 //3、创建使用webpack模板的Vue单页应用，Enter后根据提示完成项目的创建
  vue init webpack projectname
 //4、进入项目目录下
  cd projectname
 //5、下载项目引用的包
  npm install
 //6、运行项目
  npm run dev

以上命令执行完后，在浏览器中输入http://localhost:8080/ 出现vue的界面就是创建成功

Vue 的使用

如何在项目中使用vue；可以通过引用下载好的vue.js文件；也可以通过cdn形式引入

1.下载的vue.js 文件

 //在html中引入vue的包文件
<script type="text/javascript" src="包文件地址/vue.js"></script>

新手最好引入vue.js有提示，vue.min.js是压缩版本

2.通过cdn形式

<script  src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

参考个人笔记：前端框架vue学习笔记：环境搭建

参考

• Vue.js 官方文档
• [Vue 牛刀小试]：第一章 - 一些基础概念
• 一句话理解Vue核心内容
• Vue.js 教程 - 菜鸟教程