js的装置格局,js开发环境设置教程

By admin in 4858美高梅 on 2019年3月25日

1.前言

Vue
是一款本身的、多用途且高质量的javascript框架,与任何大型框架不一样的是,Vue
被设计为能够自底向上逐层应用,它亦可帮您创制可维护性和可测试性更强的代码库,Vue是渐进式的javascript框架库。

一、简介

一、简介

感到jQuery不够用了,在前者框架泛滥的时候,觉得是时候学习二个趁手的框架了。

2.装置简介

Vue集成环境三大骨干器件:node.js,npm,vue。

Vue.js 是什么

Vue.js 是什么

4858美高梅 ,Vue.js (读音 /vjuː/,类似于 view)
是一套构建用户界面包车型地铁渐进式框架。与别的重量级框架 不一致的是,Vue
选拔自底向上增量开发的规划。Vue
的大旨库只关切视图层,它不仅仅简单上手,还有利于与第叁方库或既有项目结合。另一方面,当与单文件组件和
Vue 生态系统扶助的库结合使用时,Vue
也截然能够为复杂性的单页应用程序提供驱动。Vue.js (读音 /vjuː/,类似于
view)
是一套营造用户界面包车型大巴渐进式框架。与其它重量级框架分裂的是,Vue
选择自底向上增量开发的设计。Vue
的主旨库只关怀视图层,它不但不难上手,还便宜与第贰方库或既有品种组成。另一方面,当与单文件组件和
Vue
生态系统援救的库重组使用时,Vue
也完全能够为复杂性的单页应用程序提供驱动。

3.node.js安装

下载地址:

Vue.js(读音 /vjuː/, 类似于 view)
是一套营造用户界面的渐进式框架。与此外重量级框架不一样的是,Vue
选用自底向上增量开发的统一筹划。Vue
的主题库只关心视图层,并且分外容命理术数习,非凡不难与其余库或已有项目结合。另一方面,Vue
完全有力量驱动选拔单文件组件和Vue生态系统扶助的库开发的纷纷单页应用。

Vue.js(读音 /vjuː/, 类似于 view)
是一套创设用户界面包车型客车渐进式框架。与任何重量级框架分裂的是,Vue
选择自底向上增量开发的布署性。Vue
的宗旨库只关切视图层,并且卓殊容命理术数习,非凡简单与别的库或已有品种整合。另一方面,Vue
完全有力量驱动选用单文件组件和Vue生态系统辅助的库开发的繁杂单页应用。

安装vue环境

1.安装node.js
从node.js官网下载并安装node,安装进度很简短,一路“下一步”就足以了。

2、安装cnpm
win+r打开命令行,输入npm install -g cnpm --registry=http://registry.npm.taobao.org(Tmall镜像)然后等待安装实现。

3安装vue
输入.npm install vue 安装

4设置脚手架vue-cli
输入npm install -g vue-clijs的装置格局,js开发环境设置教程。 安装

5创设vue第5个品类
输入npm init webpack vue_test 创设。创制项目名称为(vue_test)

6进去到vue项目目录
输入cd vue_test 进入和查阅目录

7设置依赖
输入npm install 安装
输入npm run dev 验证是还是不是安装成功
在浏览器中输入 :localhost:8080(暗许端口为8080)

备考命令符号:
node -v 检查版本号
npm -v检查版本号
npm install vue 安装
npm install -g vue-cli 安装脚手架
vue -V(大写检查版本是或不是安装)
vue 若出现vue消息表达成功
npm init webpack vue_test 创设项目名称为(vue_test)
cd vue_test进入实际项目文件夹
npm install安装注重
npm run dev 测试环境是或不是搭建成功
能够在第四步前,改变vue项目暗中同意目录,输入cd wesktop(桌面)然后在装置vue-cli

4858美高梅 1

图片.png

4.Vue安装

在dos命令中npm install –global vue-cli ,全局安装vue-cli。

Vue.js 的对象是因此尽大概不难的 API 实现响应的多少绑定和整合的视图组件。

Vue.js 的对象是由此尽或许不难的 API
完成响应的数码绑定组成的视图组件

5.检查八个焦点组件是或不是安装成功

在dos命令环境中查阅是还是不是安装成功以及安装版本号:

查看nodejs:node -v

查看npm:npm -v

查看vue:vue -V

示范如下:

 

Vue.js是三个MVVM形式的框架,要是读者有angular经验,一定能够相当慢入门Vue的

Vue.js是八个MVVM形式的框架,如若读者有angular经验,一定能够急忙入门Vue的

vue.js的特点:

vue.js的特点:

易用: 已经会了HTML,CSS,JavaScript?立时阅读指南即可开首创设利用!

易用: 已经会了HTML,CSS,JavaScript?立即阅读指南即可初始营造利用!

利落: 不难小巧的着力,渐进式技术栈,足以应付任何规模的使用。

灵活: 简单小巧的中坚,渐进式技术栈,足以应付任何规模的行使。

十分的快: 16kb min+gzip 的运作大小,超快虚拟 DOM ,最简便易行的优化

高速: 16kb min+gzip 的周转大小,超快虚拟 DOM ,最便捷的优化

贰 、环境搭建

② 、环境搭建

vue推荐开发条件:

vue推荐开发条件:

Node.js: javascript运维条件(runtime),分歧系统直接运营各样编制程序语言

Node.js: javascript运转环境(runtime),不一样类别一直运营各类编程语言

npm:
Nodejs下的包管理器。由于国内采纳npm会相当慢,那里推荐应用TaobaoNPM镜像()

npm:
Nodejs下的包管理器。由于国内应用npm会非常的慢,那里推荐应用天猫NPM镜像(

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

$ npm install -g cnpm
–registry=

webpack: 它至关心注重要的用途是通过 CommonJS
的语法把持有浏览器端需求揭露的静态财富做相应的备选,比如财富的集合和包裹。

webpack: 它最重要的用途是由此 CommonJS
的语法把富有浏览器端须要发表的静态能源做相应的预备,比如能源的集合和打包。

vue-cli: 用户生成Vue工程模板

vue-cli: 用户生成Vue工程模板

三、安装node.js

三、安装node.js

从node.js官网下载并设置node,安装进程非常粗略,一路“下一步”就足以了(傻瓜式安装)。安装到位现在,打开命令行工具,输入node
-v,如下图,若是出现相应的本子号,则印证安装成功。

从node.js官网下载并设置node,安装进度一点也不细略,一路“下一步”就能够了(傻瓜式安装)。安装到位之后,打开命令行工具,输入node
-v,如下图,假若现身相应的版本号,则说明安装成功。

4858美高梅 2

4858美高梅 3

npm包管理器,是融为一体在node中的,所以,间接输入npm
-v就会如下图所示,呈现出npm的版本新闻。

npm包管理器,是如胶似漆在node中的,所以,直接输入npm
-v就会如下图所示,展现出npm的版本音讯。

4858美高梅 4

4858美高梅 5

oK!node环境已经安装到位,npm包管理器也有了。由于有些npm有个别财富被遮挡只怕是海外能源的原由,平常会造成用npm安装正视包的时候失利,全体笔者还亟需npm的国内镜像—cnpm。

OK!node环境已经设置完结,npm包管理器也有了。由于有些npm有些财富被遮挡也许是外国能源的原故,平时会导致用npm安装重视包的时候退步,全部笔者还亟需npm的境内镜像—cnpm。

安装cnpm

安装cnpm

在命令行中输入npm install -g cnpm
–registry=

在命令行中输入npm install -g cnpm
–registry=

4858美高梅 6

4858美高梅 7

姣好之后,大家就能够用cnpm代替npm来安装重视包了。若是想进一步领悟cnpm的,查看天猫商城npm镜像官网。

达成之后,大家就能够用cnpm代替npm来安装正视包了。假诺想进一步掌握cnpm的,查看Tmallnpm镜像官网。

设置vue-cli脚手架营造筑工程具

设置vue-cli脚手架营造筑工程具

在指令行中运转命令npm install -g
vue-cli,然后等待安装完毕。通过以上三部,大家需求常备不懈的条件和工具都准备好了,接下去就初叶应用vue-cli来营造项目。

在指令行中运营命令npm install -g
vue-cli,然后等待安装到位。通过上述三部,大家必要居安虑危的环境和工具都准备好了,接下去就开首选择vue-cli来构建项目。

用vue-cli创设项目

用vue-cli构建项目要创设项目,首先大家要选定目录,然后再命令行中把目录转到选定的目录。在那里,作者选拔桌面来存放在新建的门类,则大家须求先把目录cd到桌面,如下图。

要开创项目,首先大家要选定目录,然后再命令行中把目录转到选定的目录。在此处,作者选用桌面来存放新建的门类,则大家供给先把目录cd到桌面,如下图。

4858美高梅 8

4858美高梅 9

在桌面目录下,在指令行中运营命令vue init webpack
firstVue。解释一下这几个命令,那些命令的情趣是伊始化叁个种类,在那之中webpack是营造筑工程具,也正是整个项目是依据webpack的。个中firstVue是整整项目文件夹的称呼,那个文件夹会自动生成在您钦命的目录中(小编的实例中,会在桌面生成该文件夹),如下图。

在桌面目录下,在命令行中运维命令vue init webpack
firstVue。解释一下这些命令,那么些命令的意味是开头化叁个种类,当中webpack是创设筑工程具,约等于成套项目是依据webpack的。在那之中firstVue是整套项目文件夹的名目,那个文件夹会自动生成在你钦点的目录中(作者的实例中,会在桌不熟悉成该文件夹),如下图。

4858美高梅 10

4858美高梅 11

运维起头化命令的时候回让用户输入几个着力的选项,如项目名称,描述,作者等消息,假诺不想填直接回车私下认可就好。

运营伊始化命令的时候回让用户输入多少个为主的选项,如项目名称,描述,小编等音讯,假如不想填直接回车暗中同意就好。

4858美高梅 12

4858美高梅 13

开拓firstVue文件夹,项目文件如下所示。

开拓firstVue文件夹,项目文件如下所示。

4858美高梅 14

4858美高梅 15

那便是整套项指标目录结构,个中,咱们第三在src目录中做修改。那几个类型未来还只是3个构造框架,整个项目须要的借助能源都还从未设置,如下图。

那正是一切项指标目录结构,当中,大家根本在src目录中做修改。这一个类型以往还只是贰个布局框架,整个项目须要的借助资源都还尚未安装,如下图。

4858美高梅 16

4858美高梅 17

设置项目所需的借助要设置依赖包,首先cd到项目文件夹(firstVue文件夹),然后运营命令cnpm
install,等待安装。

安装项目所需的借助

4858美高梅 18

要设置依赖包,首先cd到品种文件夹(firstVue文件夹),然后运转命令cnpm
install,等待安装。

安装完成今后,会在大家的种类目录firstVue文件夹中多出2个node_modules文件夹,那里边正是我们项目须要的依赖包财富。

4858美高梅 19

4858美高梅 20

安装完结以往,会在我们的类别目录firstVue文件夹中多出三个node_modules文件夹,那里边正是大家项目要求的依赖性包能源。

设置完正视包之后,就足以运作总体项目了。

4858美高梅 21

运行品种在品种目录中,运转命令npm run
dev,会用热加载的主意运转大家的接纳,热加载能够让我们在修改完代码后并非手动刷新浏览器就能实时看到修改后的法力。

安装完重视包之后,就足以运作总体项目了。

4858美高梅 22

运文章种

此处差不多介绍下npm run
dev命令,在那之中的“run”对应的是package.json文件中,scripts字段中的dev,也正是node
build/dev-server.js命令的三个快捷格局。项目运维成功后,浏览器会自动打开localhost:8080(假设浏览器没有活动打开,能够手动输入)。运维成功后,会晤到如下所示的界面。

在品种目录中,运转命令npm run
dev,会用热加载的章程运行大家的采取,热加载能够让大家在修改完代码后不要手动刷新浏览器就能实时看到修改后的作用。

4858美高梅 23

4858美高梅 24

以上便是本文的全体内容,希望对大家的就学抱有支持,也意在大家多多扶助脚本之家。

此间大致介绍下npm run
dev命令,当中的“run”对应的是package.json文件中,scripts字段中的dev,也正是node
build/dev-server.js命令的一个急迅格局。

你大概感兴趣的稿子:

  • Vue.js简易安装和飞跃入门(第①课)
  • Vue学习笔记进阶篇之vue-router安装及运用办法
  • Vue学习笔记进阶篇之vue-cli安装及介绍
  • 详解在vue-cli项目中安装node-sass
  • 手把手搭建筑和安装装基于windows的Vue.js运维环境
  • 详解vue.js的devtools安装
  • 详解使用nodeJs安装Vue-cli
  • vue.js从安装到搭建进度详解
  • vue.js开发环境设置教程
  • 值得珍藏的vuejs安装教程

品类运作成功后,浏览器会自行打开localhost:8080(假如浏览器没有活动打开,能够手动输入)。运维成功后,会看出如下所示的界面。

4858美高梅 25

如上正是本文的全体内容,希望对大家的求学抱有协助,也指望大家多多协理脚本之家。

您可能感兴趣的篇章:

  • Vue.js简易安装和飞跃入门(第①课)
  • Vue学习笔记进阶篇之vue-router安装及选用情势
  • Vue学习笔记进阶篇之vue-cli安装及介绍
  • 详解在vue-cli项目中设置node-sass
  • 手把手搭建筑和安装装基于windows的Vue.js运维条件
  • 详解vue.js的devtools安装
  • 详解使用nodeJs安装Vue-cli
  • vue.js的装置格局
  • vue.js从安装到搭建进度详解
  • 值得珍藏的vuejs安装教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有