【Vue】脚手架搭建

搭建vue脚手架

一、安装Node.js

1、Node.js简介

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。

2、下载Node.js

打开官网下载链接:https://nodejs.org/en/download/

【Vue】脚手架搭建_第1张图片

下载完成后就可以开始安装了,只需无脑下一步就行,不过记得修改自己安装的路径

【Vue】脚手架搭建_第2张图片

至此Node.js已经安装完成,可以先进行下简单的测试安装是否成功了,后面还要进行环境配置
在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口

【Vue】脚手架搭建_第3张图片

node -v 

能够显示版本号就说明已经安装成功了
【Vue】脚手架搭建_第4张图片

安装完后的目录如下图所示:

【Vue】脚手架搭建_第5张图片

环境配置

我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图

【Vue】脚手架搭建_第6张图片

创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix"D:\Develop\nodejs\node_global"

npm config set cache "D:\Develop\nodejs\node_cache"

【Vue】脚手架搭建_第7张图片

接下来设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

【Vue】脚手架搭建_第8张图片

进入环境变量对话框,在【系统变量】下新建【NODE_PATH】

【D:\Develop\nodejs】 此处为自己的安装的路径

【Vue】脚手架搭建_第9张图片

然后编辑path,新建,为%NODE_PATH%

【Vue】脚手架搭建_第10张图片

此时Node就已经安装成功了!!!

二、配置淘宝镜像

打开 “命令提示符” 窗口,输入:

npm config set registry https://registry.npm.taobao.org

完成配置

三、安装脚手架

打开 “命令提示符” 窗口,输入:

npm install -g @vue/cli

注意:如果安装过程一直不动,可以敲下回车

检查是否安装成功: vue -V 或者 vue --version

【Vue】脚手架搭建_第11张图片

三、 创建一个vue项目

  • cd到自己想要保存的路径 cd 路径

【Vue】脚手架搭建_第12张图片

  • 在要创建工程的目录下输入 :vue create 项目名

【Vue】脚手架搭建_第13张图片

回车安装即可

安装完成之后 ,将文件拖入到vscode或者其他编译器,在左侧能够看到创建的资源

【Vue】脚手架搭建_第14张图片

Ctrl + ~ 打开终端

【Vue】脚手架搭建_第15张图片

输入一下代码,启动

npm run serve

【Vue】脚手架搭建_第16张图片

此时就可以看到页面了
【Vue】脚手架搭建_第17张图片

你可能感兴趣的:(Vue,vue.js,javascript,前端)