Vue脚手架的安装(超详细篇,保姆级教程)

一、环境安装

1.软件下载

官网:https://github.com/coreybutler/nvm-windows/releases

官网往下滑,找到这个nvm-setup.zip,然后进行下载

2.安装

下载后,双击进行安装,注意安装目录不要出现中文和空格

安装后,打开cmd,输入命令 nvm ,查看安装版本

修改一下下载的镜像地址:

打开一下你刚刚的安装目录nvm,双击打开,找到settings.txt,然后用记事本编辑打开,复制粘贴

node_mirror: http://npmmirror.com/mirrors/node/
npm_mirror: http://npmmirror.com/mirrors/npm/

随后保存,这样子我们镜像就配置完成了

3.使用

打开cmd(快捷键win+R)

(1)安装指定版本的node

这边的安装版本可以跟我的一样,安装16.20.2和14.21.3的版本

nvm install 14.21.3 // 安装14.21.3 版本node 或者输入

如果要安装最新的版本:

nvm install 14 nvm install latest // 安装最新版本node

(2)查看node所有安装版本

nvm list

这边我下载了node的14和16的版本

可以看到这个就说明你刚刚安装的版本成功了!!!

(3)使用指定版本的node

nvm use 14.21.3 // 使用14.21.3版本node

此时,你再次输入nvm list

(4)查看node和nvm的使用版本

node -v

npm -v

这版本是相互匹配的,

16版本的node就是跟着8版本的npm

14版本的node就是跟着6版本的npm

(5)卸载指定版本的node

nvm uninstall 14.5.0 // 卸载14.5.0版本node

4、安装成功后可查看系统环境变量

这个系统环境变量是它自己添加上去的,不用我们手动添加

查看path:

能看到环境变量的就是环境安装成功了

二、安装脚手架

-g的意识是全局安装,就-g和-s,-s是局部安装,就是只在当前项目可以使用

这边建议全局安装,使用-g,所有项目都可以使用

npm install @vue/cli -g  

如果安装不成功那就使用管理员身份打开运行,然后再输入命令

脚手架安装完之后,打开nvm安装目录,打开你刚刚使用node的版本

(我是使用16版本的)

安装成功示例:

然后再打开cmd,输入vue

输入   vue -V  可以查看脚手架的安装版本

安装失败示例:

三、项目创建和运行

项目创建:

打开你要创建项目的目录下,

直接输入cmd打开

这样子你就可以进入当前目录

输入  vue create 项目名

按下回车键,之后会出现这个页面

弄到这个就说明项目创建成功

项目运行:

说明项目运行成功

四、基本使用和说明

在这边进行项目的运行,快捷键   ctrl+`   打开控制台输入npm run serve进行项目运行

成功~~~

  • 17
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
Vue CLI(vue脚手架)是一个官方提供的对Vue.js开发的脚手架工具,通过它我们可以快速初始化一个基于Vue.js的项目。下面是一个详细的Vue CLI教程,包括如何安装、创建项目、常用命令等。 1. 安装Node.js:首先确保已经安装了Node.js,去Node.js官网下载安装包,按照指引完成安装。 2. 安装Vue CLI:打开命令行工具(如终端、命令提示符等),运行以下命令安装Vue CLI: ``` npm install -g @vue/cli ``` 3. 创建Vue项目:在命令行中进入你想要创建项目的目录,运行以下命令创建项目: ``` vue create project-name ``` 其中,`project-name`是你要创建的项目名称,可以根据需要自定义。 4. 选择项目配置:在创建项目的过程中,Vue CLI会让你选择一些项目配置,比如使用的包管理工具、需要的特性等,根据需要选择或者保持默认配置。 5. 运行项目:进入项目目录,运行以下命令启动项目: ``` cd project-name npm run serve ``` 6. 编写代码:打开项目目录,在`src`文件夹下可以看到`main.js`文件,这是项目的入口文件,可以在这里编写Vue代码。 7. 构建项目:完成代码编写后,运行以下命令构建项目: ``` npm run build ``` 这会生成一个可部署的静态网站文件放在`dist`目录下。 8. 常用命令: - `npm run serve`:启动开发服务器,实时编译和热重载。 - `npm run build`:构建生产环境的项目。 - `npm run lint`:检查和修复代码风格。 以上就是一个详细的Vue CLI教程,希望能够帮到你入门Vue开发。如果想要进一步学习和掌握Vue CLI,建议查阅Vue CLI官方文档,了解更多详细信息。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值