vue.js初级教程--02.环境搭建

node.js

如何安装

  • 官方网址
	 https://nodejs.org/en/
  • 如何验证node.js安装成功
	node -v

能够解决什么问题

相较于其他服务器框架,它给系统性能能提升所带来的好处?

node.js特性

  • javascript运行环境
  • 依赖Chrome v8引擎进行代码解释
  • 事件驱动
  • 非阻塞I/O
  • 轻量/可伸缩的
  • 实时交互的应用面比较广(I/O密集型的服务器模型里面性能比较好)
  • 单进程、单线程

解决的问题

  • 并发连接数

案例

  • 利用node.js http模块 我们监听端口8888 返回一个字符串
	var http = require("http");	http.createServer(function(request,response){
		response.writeHead(200,{‘Content-type‘:‘text/plain‘});
		response.end(‘hello world\n‘);

	}).listen(8888);

npm

简介

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题

解决的问题

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用
  • 允许用户从NPM服务器下载别人编写的第三方应用程序到本地使用
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

缺点

  • npm利用国外的镜像仓库下载比较慢
  • 国内淘宝的源进行下载

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

命令

  • 安装 cnpm install
  • 更新 cnpm update 模块名称
  • 查询 cnpm search 模块名称
  • 查看 cnpm list

webpack

简介

一个前端资源加载/打包工具

能解决什么问题?

  • 它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用
  • 模块化,让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
  • scss,less等CSS预处理器

安装

cnpm install webpack -g

vue-cli

简介

一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目

构建项目

	cnpm init webpack 项目名称

安装依赖

	cd 项目目录
	cnpm install

运行项目

	cnpm run dev

打包项目

	cnpm run build
时间: 2024-10-27 04:05:39

vue.js初级教程--02.环境搭建的相关文章

Vue.js项目的开发环境搭建与运行

写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装node.js(JavaScript运行环境runtime) 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以完成. 完成之后,开发命令行工具,输入 node -v 如果出现相应的版本号,则说明安装成功. 另外,npm是node.js下的包管理器,npm能很好的和诸如webp

vue.js初级教程--01.简介

Vue特点 渐进式框架 采用自底向上增量开发的设计 核心库只关注视图层 轻量级 22kb min+gzip 高性能 渲染性能:支持条件.循环.服务端渲染方式 更新性能:数据驱动.响应式 特性 数据驱动,支持双向数据绑定,异步批量DOM更新 组件化,支持组件独立.组件复用以及异步加载 模块化,模板.数据.外数据.方法.生命周期函数.样式 指令,支持内置指令和自定义指令 虚拟DOM 为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如

Vue.js入学教程

Vue.js是什么Vue.js 是用于构建交互式的 Web 界面的库.Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.Vue.js(类似于view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,vue采用自底向上增量开发的设计.vue的核心只关注视图层,它不仅易于上手,还便于与第三方库或即有项目整合.另一方面,当与单文件组件和vue生态系统支持的库结合使用时,vue也完全能够为复杂的但也应用程序提供驱动. Vue.js 特点 简洁: HTML

热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!

课程简介 课程地址:https://ke.qq.com/course/432961 机构名称:大华软件学院 授课讲师:大强老师 课程名称:Vue.js 实战教程 V2.x(一)基础篇 课程简介:包括前端发展史.Vue.js简介.第一个Vue.js程序.安装环境和Vue.Vue实例.模板语法.计算属性和侦听器.Class与Style绑定.条件渲染.列表渲染.事件处理.表单输入绑定.组件基础等等. 适合人群: 1.初出茅庐,想学习前端开发的同学: 2.没用过Vue.js,想学习更多框架的同学: 3.

vue.js在windows本地下搭建环境和创建项目

Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. 首先vue.js的作者是中国人,所以说他是国产的,吸收了google的angular.js和facebook的react.js的特性,摒弃了jquery传统的DOM操作,采用数据绑定和指令等概念,可以说是未来WEB端开发的

【vue】vue.js安装教程

前提:已安装nodejs--npm  (备注教程  "物理安装"  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项目managerSys中安装npm(基于node.js,利用淘宝npm镜像安装相关依赖) 接上步输入命令:    npm install -g cnpm --registry=https://registry.npm.taobao.org 2)安装全局vue-cli脚手架(用于帮助搭建所需

R语言初级教程(02): RStudio的使用

上一篇博客已经介绍了R和RStudio的安装,这篇博客将介绍RStudio的使用. RStudio是R的一个集成开发环境(IDE).不知道IDE的可以百度一下,IDE的目的就是要让开发更加快捷和方便. 如果你还没有安装RStudio,可以参考我上一篇博客<R语言初级教程(01):R编程环境的搭建>进行安装. 注意:安装Rstudio前一定需要先安装R. RStudio 的好处很多,就不再一一赘述了.用过之后你才能体会它的好,灰常苏服--. 不多说了,来了解下RStudio. 界面概况 Sour

Vue.js 系列教程 5:动画

原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地方.我和原作者的初衷一样,希望大家能够通过这个系列文章有所收获,至少可以增加学习的乐趣,我也在学习的路上,所学心得必将与大家共勉. 这是 JavaScript 框架 Vue.js 五篇教程的第五部分.在这个系列的最后一部分,我们将学习动画(如果你了解我,你知道这一章迟早会来).这不是一个完整的指南,

vue.js精讲02

2017-09-17 笔记及源码地址 : https://github.com/wll8/vue_note vue 中的事件深入. 事件: @click/mouseover…事件简写: @ 如 @clkck属性简写: : 如 :src传入原生事件对象: $event 事件冒泡:原生 ev.cancelBubble=true;vue .stop; 默认事件:原生 ev.preventDefault();vue .prevent; 键盘事件:keydown 文字没出现keyup 文字出现键码 .13