澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:js的安装方法,VUE搭建开

目前一贯在读书Vue.js框架。

Vue项目搭建记录,vue项目搭建

近期一贯在念书Vue.js框架。

因为原先尚未前者项指标阅历,也没学过什么样前端框架,所以,对于vue.js的求学某些慌乱。

在vue.js官网看教程,依照教程指导,能够绝不脚手架开荒,也得以搭建开采碰到。

那边记录下搭建进度(教程参照他事他说加以侦察网络各前辈提供的素材):

安装Node.js:从Node.js官方网址安装Node.js。

  安装到位后,直接在命令提醒符(win PRADO => 输入 cmd)中输入 node -v 验证是还是不是安装成功。

  澳门新浦京娱乐场网站 1如图,node -v后输出了版本号“v6.11.4”,安装成功。

设置Tmallnpm镜像(在境内天猫npm镜像速度很快,可代表官方npm镜像):命令提醒符中输入 => npm install -g cnpm –registry= 回车,等待安装完毕。

设置vue命令行工具(Vue-CLI):命令提示符内输入 cnpm install -g vue-cli (此处输入cnpm就是意味使用天猫商城npm镜像,若选拔官方npm,则输入 npm install --global vue-cli),回车,等待安装完结。

  安装到位后,直接在命令提醒符中输入 vue 验证是还是不是安装成功。

  澳门新浦京娱乐场网站 2如图,出现了就如上述的音讯,那么,安装成功。

安装进程告一段落。

接下去,初阶创办项目。

依然在命令提示符中操作 ↓

【这一步按照喜好,自由支配是还是不是要求,并私行支配输入内容:在创造项前段时间,在命令提醒符中输入  cd d:文书档案 进入 d盘 的 文书档案文件夹内。那样就足以将下边步骤创造的品种,创建在 d盘 的 文书档案文件夹内。当然,如上所述,自由支配项目创建的不二秘诀。】

指令提醒符中输入 vue init webpack project_folder_name (项目文件夹名自定义),回车。

稍等,会一步一步出现如下消息:

澳门新浦京娱乐场网站 3

服从提醒,实现就可以。

那会儿,项目创设完成。

开班设置注重:

  命令提示符中输入 cd project_folder_name (刚才自定义的连串文件夹名称)进入文件夹。

  命令提醒符中输入 cnpm install (使用cnpm的由来同地方的cnpm)。回车,等待安装到位。

那时候,项目文件夹目录内,应该早就有了 node_modules 文件夹,那么,恭喜!依赖安装完毕。

不出意外的话,项目应当早就搭建达成了。

试一试吧:命令提醒符中输入 npm run dev

澳门新浦京娱乐场网站 4

现身上述音信后,系统将电动打开浏览器(地址为: npm run dev 后手动张开浏览器,并输入以上地方。

综上!

(以上Win10 64系统)

 

——————————————————————— 分割线 ———————————————————————

 

Vue Devtools 安装:

点击 Vue Devtools 进入下载页面。

可下载zip包,放入本地 d盘的文书档案文件夹里(您随意,爱放哪就放哪,本身找获得就行)。

澳门新浦京娱乐场网站 5

解压到文件夹(此处,我直接设定问文件夹名和压缩包同名。)

下载好,并解压好后,张开命令提醒符。

在指令提醒符中输入 cd D:文档vue-devtools-master 进入工程所在文件夹。

在指令提醒符中输入 cnpm install 回车,等待。

  澳门新浦京娱乐场网站 6

 

一声令下提醒符中输入 npm run build 回车,等待。

澳门新浦京娱乐场网站 7

然后,张开下图目录内的 mainfest.json 文件。

澳门新浦京娱乐场网站 8

修改 background 节点下 persistent 属性的值 为 true。

澳门新浦京娱乐场网站 9

保存。

打开 Google Chrome。

在网站栏输入 chrome://extensions 展开扩张程序。

勾选开拓者情势,并点击 ”加载已解压的开始展览程序...“ 开关。

澳门新浦京娱乐场网站 10

选择chrome文件夹。

澳门新浦京娱乐场网站 11

设置完结。

效果图:

澳门新浦京娱乐场网站 12

 

这段日子平素在求学Vue.js框架。 因为以前从未前者项目标阅历,也没学过怎么样前端框架,所以,对于vue.js的学...

Vue.js是一套构建用户分界面包车型地铁渐进式框架。它既集众多绝妙前端框架之大成,又保险了其简要易用的特色。对vue.js感兴趣并且已经通读官方基础教程的初学者的话,开端八个实战项目是更进一步深切学习vue.js最棒的点子了。在此之前,需求学会怎么搭建开采条件。

一、简介

因为以前从未有过前者项指标经历,也没学过哪些前端框架,所以,对于vue.js的学习某个受宠若惊。

开采条件的搭建

Vue.js 是什么

在vue.js官方网站看教程,依照教程引导,能够不用脚手架开荒,也足以搭建开辟条件。

安装Node.js

Node.js官网:https://nodejs.org/en/

跻身Node.js官方网站,选择下载并设置Node.js。安装进度只必要点击“下一步”就可以,如下图,特别轻易。

澳门新浦京娱乐场网站 13

澳门新浦京娱乐场网站 14

澳门新浦京娱乐场网站 15

澳门新浦京娱乐场网站 16

澳门新浦京娱乐场网站 17

证实Node.js是或不是安装好,在windows下,win r召唤出运行窗口,输入cmd展开命令行窗口。输入node -v就能够获得相应的Node.js版本。

澳门新浦京娱乐场网站 18

npm包管理器是合两为一在Node.js中了,所以在装置Node.js的时候就早已自带了npm。输入npm -v可得到npm的本子。

澳门新浦京娱乐场网站 19

专注npm的版本必要在3.0.0之上版本,所以,如果npm的本子小于3.0.0,输入以下命令更新npm至最新版本。

npm -g install npm

Vue.js(读音 /vjuː/, 类似于 view) 是一套营造用户分界面包车型客车渐进式框架。与别的重量级框架不相同的是,Vue 选取自底向上增量开垦的规划。Vue 的主旨库只关怀视图层,并且极度容易学习,特别轻易与其余库或已有项目结合。另一方面,Vue 完全有技术驱动选择单文件组件和Vue生态系统帮助的库开辟的复杂性单页应用。

这里记录下搭建进度(教程参谋英特网各前辈提供的质地):

安装cnpm

是因为能源的限制,安装npm倚重包的时候时有时退步,提议使用npm的国内镜像cnpm 命令行工具代替私下认可的npm。

npm 国内镜像https://npm.taobao.org/

在命令行中输入以下内容等待安装

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

Vue.js 的对象是因此尽恐怕不难的 API 落成响应的多少绑定整合的视图组件

设置Node.js:从Node.js官方网站安装Node.js。

cpnm全局安装vue-cli

在指令行中运转以下命令然后等待安装

cnpm install -g vue-cli

澳门新浦京娱乐场网站 20

Vue.js是五个MVVM形式的框架,纵然读者有angular经验,一定能够十分的快入门Vue的

  安装到位后,直接在指令行程序(win 大切诺基 => 输入 cmd)中输入 node -v 验证是还是不是安装成功。

创设项目

vue.js的特点:

  澳门新浦京娱乐场网站 21如图,node -v后输出了版本号“v6.11.4”,安装成功。

新建项目

在这边笔者将vue项目建在f盘的vueProjiects文件夹下,利用命令进入此目录。在cmd中输入盘符f:回车就能够进入F盘:

澳门新浦京娱乐场网站 22

输入指令 cd vueProjects跳到此目录下:

澳门新浦京娱乐场网站 23

在此目录下开创二个基于 webpack 模板的新品类,即在cmd中输入以下命令:

vue init webpack my-vue-project

澳门新浦京娱乐场网站 24

vue init webpack my-vue-project意思是伊始化一个连串,利用的是webpack打包和压缩,此项目命名字为my-vue-project。那样,my-vue-project文件夹就自动生成刚刚在钦赐的目录中,在此进度中,须求输入项目名、描述、小编等。

开垦my-vue-project文件夹,项目文件如下:

澳门新浦京娱乐场网站 25

易用: 已经会了HTML,CSS,JavaScript?立刻阅读指南就可以开头创设利用!

安装Taobaonpm镜像(在境内Tmallnpm镜像速度非常的慢,可代替官方npm镜像):命令提示符中输入 => npm install -g cnpm –registry= 回车,等待安装到位。

设置项目正视

在cmd中,注意要求选择命令先固定到my-vue-project目录下,然后输入指令cnpm install安装项目所需的信赖性包财富

cnpm install

澳门新浦京娱乐场网站 26

能够观望my-vue-project文件夹下多了三个node_modules文件

澳门新浦京娱乐场网站 27

利落: 简单小巧的基本,渐进式技巧栈,足以应付任何规模的使用。

安装vue命令行工具(Vue-CLI):命令行程序内输入 cnpm install -g vue-cli (此处输入cnpm便是象征使用天猫npm镜像,若使用官方npm,则输入 npm install --global vue-cli),回车,等待安装到位。

运作项目

采取命令npm run dev 运营项目

npm run dev

种类运维成功后浏览器会自动打开localhost:8080表现以下页面:

澳门新浦京娱乐场网站 28

迄今,vue的脚手架工具已经搭建实现,接下去具体品种的费用只需在src目录下举行。

【Thanks  for watching】

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

  安装完毕后,直接在指令行程序中输入 vue 验证是或不是安装成功。

澳门新浦京娱乐场网站,二、遭逢搭建

  澳门新浦京娱乐场网站 29如图,出现了近似上述的新闻,那么,安装成功。

vue推荐开拓条件:

安装进度告一段落。

Node.js: javascript运营条件(runtime),不相同系列一贯运转种种编制程序语言

接下去,开头创办项目。

npm: Nodejs下的包管理器。由于国内接纳npm会非常慢,这里推荐使用天猫商城NPM镜像(

恐怕在指令行程序中操作 ↓

$ npm install -g cnpm --registry=

【这一步依照喜好,自由支配是还是不是须要,并私行支配输入内容:在成立项前段时间,在命令行程序中输入  cd d:文书档案 进入 d盘 的 文档文件夹内。那样就足以将下边步骤创制的门类,创制在 d盘 的 文档文件夹内。当然,如上所述,自由支配项目创制的渠道。】

webpack: 它根本的用途是透过 CommonJS 的语法把具有浏览器端须求揭露的静态财富做相应的备选,举个例子能源的合并和包裹。

一声令下行程序中输入 vue init webpack project_folder_name (项目文件夹名自定义),回车。

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

稍等,会一步一步出现如下音信:

三、安装node.js

澳门新浦京娱乐场网站 30

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

安分守己提示,达成就可以。

澳门新浦京娱乐场网站 31

那儿,项目成立实现。

npm包管理器,是融为一炉在node中的,所以,直接输入npm -v就能够如下图所示,展现出npm的版本音信。

起来设置依赖:

澳门新浦京娱乐场网站 32

  命令行程序中输入 cd project_folder_name (刚才自定义的体系文件夹名称)进入文件夹。

OK!node蒙受已经安装到位,npm包管理器也会有了。由于有些npm某个能源被屏蔽或许是外国能源的来由,平时会招致用npm安装依赖包的时候退步,全体笔者还需求npm的国内镜像---cnpm。

  命令行程序中输入 cnpm install (使用cnpm的原故同地点的cnpm)。回车,等待安装到位。

安装cnpm

此时,项目文件夹目录内,应该已经有了 node_modules 文件夹,那么,恭喜!信赖安装到位。

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

不出意外的话,项目应当已经搭建实现了。

澳门新浦京娱乐场网站 33

试一试吧:命令行程序中输入 npm run dev

成就今后,大家就能够用cnpm替代npm来设置信赖包了。固然想进一步掌握cnpm的,查看Taobaonpm镜像官网澳门新浦京娱乐场网站:js的安装方法,VUE搭建开发环境及构建项目。。

澳门新浦京娱乐场网站 34

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

出现上述音讯后,系统将电动展开浏览器(地址为: npm run dev 后手动展开浏览器,并输入以上地点。

在指令行中运转命令npm install -g vue-cli,然后等待安装完结。通过上述三部,大家须求打算的条件和工具都筹划好了,接下去就起来选拔vue-cli来营造项目。

综上!

用vue-cli构建项目要创建项目,首先大家要选定目录,然后再命令行中把目录转到选定的目录。在此处,小编选择桌面来存放新建的门类,则大家需求先把目录cd到桌面,如下图。

(以上Win10 64系统)

澳门新浦京娱乐场网站 35

 

在桌面目录下,在指令行中运维命令vue init webpack firstVue。解释一下这么些命令,这些命令的意趣是起先化多个档次,在那之中webpack是塑造筑工程具,也正是整个项目是依附webpack的。在那之中firstVue是整整项目文件夹的名称,这些文件夹会自动生成在你钦赐的目录中(笔者的实例中,会在桌面生成该文件夹),如下图。

——————————————————————— 分割线 ———————————————————————

澳门新浦京娱乐场网站 36

 

运营初阶化命令的时候回让用户输入多少个主导的选项,如项目名称,描述,作者等音信,借使不想填直接回车暗中认可就好。

Vue Devtools 安装:

澳门新浦京娱乐场网站 37

点击 Vue Devtools 进入下载页面。

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

可下载zip包,放入本地 d盘的文档文件夹里(您随意,爱放哪就放哪,本身找得到就行)。

澳门新浦京娱乐场网站 38

澳门新浦京娱乐场网站 39

那正是全体项指标目录结构,个中,大家第一在src目录中做修改。那么些项目以后还只是二个组织框架,整个项目必要的依赖能源都还从未设置,如下图。

解压到文件夹(此处,笔者平素设定问文件夹名和压缩包同名。)

澳门新浦京娱乐场网站 40

下载好,并解压好后,张开命令行程序。

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

在命令行程序中输入 cd D:文档vue-devtools-master 进入工程所在文件夹。

澳门新浦京娱乐场网站 41

在命令行程序中输入 cnpm install 回车,等待。

设置完结现在,会在大家的连串目录firstVue文件夹中多出贰个node_modules文件夹,这里边即是大家项目必要的借助包能源。

  澳门新浦京娱乐场网站 42

澳门新浦京娱乐场网站 43

 

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

指令行程序中输入 npm run build 回车,等待。

运作项目在类型目录中,运营命令npm run dev,会用热加载的方法运转大家的应用,热加载能够让大家在修改完代码后不要手动刷新浏览器就会实时看到修改后的效益。

澳门新浦京娱乐场网站 44

澳门新浦京娱乐场网站 45

然后,展开下图目录内的 mainfest.json 文件。

此处大约介绍下npm run dev命令,在那之中的“run”对应的是package.json文件中,scripts字段中的dev,也正是node build/dev-server.js命令的二个火速方式。项目运作成功后,浏览器会活动展开localhost:8080(借使浏览器未有活动打开,能够手动输入)。运营成功后,会晤到如下所示的分界面。

澳门新浦京娱乐场网站 46

澳门新浦京娱乐场网站 47

修改 background 节点下 persistent 属性的值 为 true。

如上便是本文的全体内容,希望对大家的上学抱有帮助,也期望大家多多援救脚本之家。

澳门新浦京娱乐场网站 48

您大概感兴趣的小说:

  • 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安装教程

保存。

打开 Google Chrome。

在网站栏输入 chrome://extensions 打开扩大程序。

勾选开采者格局,并点击 ”加载已解压的进展程序...“ 开关。

澳门新浦京娱乐场网站 49

选择chrome文件夹。

澳门新浦京娱乐场网站 50

设置到位。

效果图:

澳门新浦京娱乐场网站 51

 

本文由澳门新浦京娱乐场网站发布于澳门新浦京娱乐场网站,转载请注明出处:澳门新浦京娱乐场网站:js的安装方法,VUE搭建开