#VUE CLI 脚手架的安装及初识脚手架(一)

目录

vue cli

安装vue cli


cli是什么?

1.CLI英文为Command-Line Interface,翻译为命令行工具,通俗来讲为脚手架。

2.使用vue-cli可以快速搭建Vue开发环境(你所需要构建项目的基础文档闭包)以及webpack配置

3.cli的版本5.0

安装Vue CLI

可以用window系统的cmd命令行打开,也可以直接在你创建好的文件夹的vscode终端打开

用命令行和在vscode终端都是一样的命令语句。

接下来,就开始说cli的安装步骤

先说一下命令行cmd转到指定文件夹

 D:\>cd /d 盘符:文件夹名

C:\Users\xxxx>e:
E:\>cd /d 盘符:文件夹名

第一步(仅第一次执行):全局安装@vue/cli

npm install -g@vue/cli

(备注:在此之前如果下载较慢请配置npm淘宝镜像:npm config set registry    https://registry.npm.taobao.org)

#VUE CLI 脚手架的安装及初识脚手架(一)_第1张图片

 

第二步:切换到你要创建项目的目录,然后用命令行创建目录

vue create xxxx

#VUE CLI 脚手架的安装及初识脚手架(一)_第2张图片

选择你想要的vue版本,目前选择vue2 

vue_test 下开始创建demo项目 ,下载完毕出现如下目录

#VUE CLI 脚手架的安装及初识脚手架(一)_第3张图片

因为脚手架内部的文件有一个现有hello world文件 ,所以我们直接运行一下看看效果

 

第三步:启动项目

npm run serve

#VUE CLI 脚手架的安装及初识脚手架(一)_第4张图片

注意:一定要在你要运行的项目上的集成终端打开,否则会报错-4058,路径还是要在你所创建的demo下运行 npm run serve 

#VUE CLI 脚手架的安装及初识脚手架(一)_第5张图片

运行完毕就会出现 网址,将网址复制到谷歌浏览器中打开。

#VUE CLI 脚手架的安装及初识脚手架(一)_第6张图片

此时,你的脚手架就安装完毕并正常运行了。 

注意:vue脚手架隐藏了所有webpack相关的配置,若想查看具体的webbpack配置,请执行:vue inspect > output.js

你可能感兴趣的:(vue,前端框架)