澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

VUE搭建开发环境及构建项目,vue项目搭建

2019-07-15 作者:澳门新萄京官方网站   |   浏览(183)

这两天平昔在念书Vue.js框架。

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

这两天一贯在攻读Vue.js框架。

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

在vue.js官方网址看教程,遵照教程辅导,能够绝不脚手架开荒,也得以搭建开拓条件。

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

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

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

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

安装天猫商城npm镜像(在国内Taobaonpm镜像速度异常的快,可取代官方npm镜像):命令提醒符中输入 => npm install -g cnpm –registry= 回车,等待安装到位。

安装vue命令行工具(Vue-CLI):命令提醒符内输入 cnpm install -g vue-cli (此处输入cnpm正是意味使用Tmallnpm镜像,若使用官方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 奥迪Q7 => 输入 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?登时阅读指南就可以起头创设利用!

设置天猫商城npm镜像(在国内天猫npm镜像速度一点也不慢,可代替官方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会比非常慢,这里推荐使用TaobaoNPM镜像(

依然在命令行程序中操作 ↓

$ npm install -g cnpm --registry=

【这一步依据喜好,自由支配是还是不是需求,并随机支配输入内容:在创制项近些日子,在命令行程序中输入  cd d:文书档案 走入 d盘 的 文书档案文件夹内。那样就足以将下边步骤成立的类型,成立在 d盘 的 文书档案文件夹内。当然,如上所述,自由支配项目创造的门道。】

webpack: 它至关心注重要的用处是通过 CommonJS 的语法把装有浏览器端要求揭露的静态财富做相应的预备,举例财富的集合和打包。

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

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

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

三、安装node.js

澳门新萄京官方网站 30

VUE搭建开发环境及构建项目,vue项目搭建。从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 文件夹,那么,恭喜!信Ryan装到位。

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

不出意外的话,项目相应已经搭建完毕了。

澳门新萄京官方网站 33

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

成就未来,大家就能够用cnpm代替npm来设置依赖包了。假若想进一步明白cnpm的,查看Tmallnpm镜像官方网址。

澳门新萄京官方网站 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

VUE搭建开发环境及构建项目,vue项目搭建。 

设置完信赖包之后,就足以运营总体项目了。

指令行程序中输入 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

 

本文由澳门新萄京官方网站发布于澳门新萄京官方网站,转载请注明出处:VUE搭建开发环境及构建项目,vue项目搭建

关键词: