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

Vue.js 是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,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/[email protected]/dist/vue.js"></script>

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

参考

猜你喜欢

转载自www.cnblogs.com/songyan/p/12162747.html