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

时间:2022-09-09 20:34:56

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 学习入门:介绍及安装的更多相关文章

  1. Vue&period;js教程—1&period;介绍和安装

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

  2. Vue&period;js学习笔记&lpar;介绍&rpar;

    Vue语法也可以进行APP开发,需要借助weex Vue.js是一套构建用户界面的框架,只关注视图层,便于与第三方库或既有项目整合. 在Vue中的核心概念:让用户不能操作Dom元素(减少不必要的dom ...

  3. Vue&period;js学习笔记(2)vue-router

    vue中vue-router的使用:

  4. vue&period;js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  5. vue&period;js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  6. Vue&period;js&plus;vue-element搭建属于自己的后台管理模板:Vue&period;js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  7. C&num; BackgroundWorker组件学习入门介绍

    C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...

  8. vue&period;js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  9. Vue&period;js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quot ...

随机推荐

  1. PHP 图片处理工具类(添加水印与生成缩略图)

    =================ImageTool.class.php================= <?php class ImageTool { private $imagePath; ...

  2. JSON 转javabean 利器

    别再对着json来手写javabean啦.这个工作完全不要脑子,而且耗时. 这里给大家提供三种方式: android studio版: 万能的插件:GsonFormat 如何安装? Preferenc ...

  3. Theano2&period;1&period;3-基础知识之更多的例子

    来自:http://deeplearning.net/software/theano/tutorial/examples.html More Examples 现在,是时候开始系统的熟悉theano的 ...

  4. PIC32MZ tutorial -- 32-bit Timer

    The microcontroller is PIC32MZ2048ECH144 on the PIC32MZ EC Starter Kit. This microcontroller has fou ...

  5. 0505-NABCD模型、视频

    1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 NABCD模型: ...

  6. 【HDOJ】4403 A very hard Aoshu problem

    HASH+暴力. /* 4403 */ #include <iostream> #include <cstdio> #include <cstring> #incl ...

  7. 【春华秋实】深入源码理解&period;NET Core中Startup的注册及运行

      写在前面 开发.NET Core应用,直接映入眼帘的就是Startup类和Program类,它们是.NET Core应用程序的起点.通过使用Startup,可以配置化处理所有向应用程序所做的请求的 ...

  8. Zabbix监控Low level discovery实时监控网站URL状态

    今天我们来聊一聊Low level discovery这个功能,我们为什么要用到loe level discovery这个功能呢? 很多时候,在使用zabbix监控一些东西,需要对类似于Itens进行 ...

  9. Numpy学习笔记(一)

    (1)NumPy的核心对象 ndarray  用于表示N 维数组类型.它描述相同类型的元素集合. 可以使用基于零的索引访问集合中的项目. (2)Ndarray的创建 可以使用numpy.array() ...

  10. 大量原创视频教程分享(01)---XSL语法教程

    首先,感谢博客园给这个平台来发布这些教程.. 这些教程都是本人亲自录制的,时间主要是2012-2014年,大概有几十部这么多,可能有说的不对的地方,如果可以,感谢你的指正 本人也不想误人子弟,大部分教 ...