www.hj8828.com 23

www.hj8828.comvue 环境搭配

如上正是全部的搭建Vue.js项指标流程,若有错误之处希望情大家能够指正。

新建项目

在那处自个儿将vue项目建在f盘的vueProjiects文件夹下,利用命令步入此目录。在cmd中输入盘符f:回车就可以步向F盘:

www.hj8828.com 1

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

www.hj8828.com 2

在这里目录下创建一个基于 webpack 模板的新类型,即在cmd中输入以下命令:

vue init webpack my-vue-project

www.hj8828.com 3

vue init webpack
my-vue-project意思是初叶化叁个品种,利用的是webpack打包和减弱,此项目命名叫my-vue-project。那样,my-vue-project文件夹就自动生成刚刚在内定的目录中,在这里进度中,须求输入项目名、描述、小编等。

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

www.hj8828.com 4

vue.js的运行条件安排首要分为3步:

1.安装Node.js(JavaScript运营情形)

2.安装Vue.js

3.搭建Vue-cli 创制项目

那就是说作为新手怎么样来搭建 Vue.js 的运作意况呢,请跟着自个儿的流程走。

设置项目正视

在cmd中,注意供给动用命令先固定到my-vue-project目录下,然后输入指令cnpm
install安装项目所需的信任包能源

cnpm install

www.hj8828.com 5

能够见见my-vue-project文件夹下多了贰个node_modules文件

www.hj8828.com 6

第二部:

cmd命令行:

node -v  显示node版本在4.0之上就能够。                               
                                                              npm
-v
  展现npm包微型机版本。

www.hj8828.com 7

依赖node.js,利用天猫npm镜像安装相关注重在cmd里直接输入:              
                                        npm install -g cnpm
–registry=https://registry.npm.taobao.org,
回车,等待安装…1-2分钟。

www.hj8828.com 8

设置完之后,张开命令行迅速键张开cmd窗口,输入 node -v
,假诺现身版本号,那就设置成功!

支付蒙受的搭建

其三部:安装全局vue-cli脚手架

1、用于救助搭建所需的沙盘模拟经营框架:cnpm install -g
vue-cli
,回车,等待安装…

www.hj8828.com 9

2、.输入:vue,回车,若现身vue新闻验证表示成功。

www.hj8828.com 10

3、可采取:安装在桌面包车型地铁话输入cd
desktop
。不安装桌面省略,依据自身情形。

4.成立项目,输入:vue init webpack
vue_tes
t(项目文件夹名卡塔尔,回车,等待….,

www.hj8828.com 11

5、安装信任,输入:cd
vue_test
(项目名),回车,步入到具体品种文件夹

      输入:npm
install
,回车,等待…。要是设置成功,回到项目文件夹,会发觉项目组织里,多了意气风发     个node_modules文件夹(该公文里的从头到尾的经过便是事情未发生前安装的依赖)

www.hj8828.com 12

6.测验情况是还是不是搭建形成功:

方法1:输入:npm run dev

办法2:在浏览里输入:localhost:8080(暗许端口为8080卡塔尔国

www.hj8828.com 13

www.hj8828.com 14

                                       
 浏览器展开localhost:8080页面

7. 关闭命令行,张开localhost:8080页面打不开,须求从新运行npm run
dev**

注意: 运营命令行必需是项目文件目录下运作。

www.hj8828.com,例: cd  f:/vue_demo/vue_test  回车   (vue_demo
目录文件夹名字,vue_test项目名字卡塔尔**

f:    回车

起先运维npm run dev. 

cd 命令走入创设的工程目录,首先cd 本人建筑工程程的名字;

cpnm全局安装vue-cli

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

cnpm install -g vue-cli

www.hj8828.com 15

第一步:安装node.js

官网–>.

如上正是本文的全体内容,希望对大家的求学抱有助于,也可望我们多多点拨脚本之家。

安装cnpm

鉴于能源的界定,安装npm正视包的时候时有的时候战败,提出选取npm的本国镜像cnpm
命令行工具代替暗中同意的npm。

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

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

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

Vue.js的运作条件安顿,主要分为3步:

营造项目

Vue.js
是黄金年代套创设客户分界面包车型大巴渐进式框架。他自身不是五个智勇双全框架——只聚集于视图层。因而它特别容易学习,极度轻易与别的库或本来就有等级次序整合。在与相关工具和支撑库一起使用时,Vue.js
也能完美地驱动复杂的单页应用。

安装Node.js

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

步向Node.js官网,采取下载并设置Node.js。安装过程只须求点击“下一步”就能够,如下图,极度轻便。

www.hj8828.com 16

www.hj8828.com 17

www.hj8828.com 18

www.hj8828.com 19

www.hj8828.com 20

表明Node.js是不是安装好,在windows下,win+r召唤出运营窗口,输入cmd张开命令行窗口。输入node
-v就能够得到相应的Node.js版本。

www.hj8828.com 21

npm包微处理机是合二为豆蔻年华在Node.js中了,所以在安装Node.js的时候就已经自带了npm。输入npm
-v可获取npm的版本。

www.hj8828.com 22

小心npm的版本需求在3.0.0上述版本,所以,即使npm的本子小于3.0.0,输入以下命令更新npm至最新版本。

npm -g install npm

先是,下载 Node.js,请点击 下载Node
,这里依照你供给的布置下载就可以,常常我们windows系统下载 Windows
Installer
陆11个人的就好。下载完成后,会犹如此的二个Logo点击安装,然后未有啥要极度注意的,直接下一步就能够,但是要通晓您安装的路线,养成优良的习于旧贯。

Vue.js是生机勃勃套创设客商分界面包车型客车渐进式框架。它既集众多美妙前端框架之大成,又保持了其轻巧易用的风味。对vue.js感兴趣並且大器晚成度通读官方功底教程的初学者的话,起头三个实战项目是更进一层浓郁学习vue.js最棒的艺术了。早前,须求学会怎么搭建开辟条件。

接下去,安装vue.js。因为 NPM
服务器在国外,安装速度慢,所以都采用天猫的镜像。注意,此步骤需求互联网,请保持保持互联网流畅。

运营品种

选取命令npm run dev 运营品种

npm run dev

品类周转成功后浏览器会自行张开localhost:8080显示以下页面:

www.hj8828.com 23

从那之后,vue的脚手架工具已经搭建完结,接下去具体品种的付出只需在src目录下进行。

【Thanks  for watching】

那既然如此轻便就可以完成,我们所谓的运转条件陈设又是怎么回事呢?是如此的,使用npm引进是便利
包管理 。尽管是初大家,职位练习vue的采用,那你未有供给配
置情状,因为如酚酞入js就丰裕了。但是,假如是之后要用到vue做项目来讲,配置境遇是必须的。当项目与后台链接在联适时,须要导入的文件会无尽,你总不可能用到吗就导
入啥啊!那是将在用到
Node.js前端自动化的定义了。总的来说正是,把您用到的事物打包导入,大家只须要理解什么利用,别的的让系统来做,让前端开辟更加爽。

在cmd命令框输入 cnpm install -g vue-cli

设置webpack,张开命令行工具输入: