【金沙js8331】js_脚本之家,VUE搭建开垦条件及营造项目

先是第一步,安装javascript运维遭受node.js,依据你系统是三12个人或陆拾壹个人安装文件如下图。

Vue.js是一套营造客商分界面包车型地铁渐进式框架。它既集众多地道前端框架之大成,又保持了其简单易用的特征。对vue.js感兴趣并且已经通读官方底蕴教程的初读书人的话,初阶多少个实战项目是越来越深入学习vue.js最棒的主意了。以前,须求学会怎么着搭建开拓情形。

第二步,安装Nodejs下的包微处理器,展开windows命令窗口,输入“npm install -g
cnpm –registry=

支出条件的搭建

其三步,安装vue-cli脚手架创设筑工程具,在windows命令窗口输入”cnpm install -g
vue-cli”,如下图所示

安装Node.js

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

跻身Node.js官方网站,选取下载并设置Node.js。安装进度只供给点击“下一步”就能够,如下图,特不难。

金沙js8331 1

金沙js8331 2

金沙js8331 3

金沙js8331 4

金沙js8331 5

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

金沙js8331 6

npm包微处理机是如鱼似水在Node.js中了,所以在设置Node.js的时候就早就自带了npm。输入npm
-v可获得npm的版本。

金沙js8331 7

专心npm的版本须要在3.0.0上述版本,所以,要是npm的本子小于3.0.0,输入以下命令更新npm至最新版本。

npm -g install npm

第四步,在windows命令窗口输入“vue”,如现身下图所示,表示安装成功。

安装cnpm

鉴于能源的限制,安装npm信赖包的时候平日退步,建议选拔npm的国内镜像cnpm
命令行工具取代暗中认可的npm。

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

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

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

第五步,输入”cd 安装的指标路线“,”输入”vue init webpack
项目名”创设项目,具体命令见下图。

cpnm全局安装vue-cli

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

cnpm install -g vue-cli

金沙js8331 8

到安装好的品种文件夹,输入“npm rundev”运转项目,具体操作见下图。

营造项目

终极在浏览器输入“localhost:8080”看运维效果。

新建项目

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

金沙js8331 9

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

金沙js8331 10

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

vue init webpack my-vue-project

金沙js8331 11

vue init webpack
my-vue-project意思是初步化贰个档案的次序,利用的是webpack打包和减少,此项目命名叫my-vue-project。这样,my-vue-project文件夹就自动生成刚刚在钦命的目录中,在那进度中,需求输入项目名、描述、作者等。

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

金沙js8331 12

手续很简单我们能够接着学习下,谢谢我们对台本之家的支撑。

安装项目信赖

在cmd中,注意要求利用命令先坚持住到my-vue-project目录下,然后输入指令cnpm
install安装项目所需的依附包能源

cnpm install

金沙js8331 13

能够看看my-vue-project文件夹下多了叁个node_modules文件

金沙js8331 14

运作项目

利用命令npm run dev 运维项目

npm run dev

品类运作成功后浏览器会活动展开localhost:8080表现以下页面:

金沙js8331 15

至此,vue的脚手架工具已经搭建完毕,接下去具体品种的支出只需在src目录下张开。

【Thanks  for watching】

发表评论

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