Vue脚手架安装(一套超详细的流程)

一、安装Node.js

         1.浏览器搜索node.js官网 Node.js — Run JavaScript Everywhere

下载自己电脑系统所对应的版本号(我这里是windows11),windows11以下的node.js的版本要更低一点。

         2.下载完成解压,点击安装,然后就是大家最喜欢的一键无脑点击next了,但是建议大家选择路径的时候放在c盘以外的盘,安装之前最好是先创建一个文件夹

         3.win+r输入cmd,在命令窗口分别输入 node -v  和 npm -v,出现了对应的版本号,恭喜你安装成功啦!

二、npm全局配置

1.找到自己安装node.js目录下,新建node_global和node_cache两个文件夹

node_globa(npm全局模块的存放路径)

node_cache(cache的路径),需要把该文件夹的权限全部打开,否者后面会出错

右击node_cache文件夹 -> 属性 ->安全 ->  编辑 ->  权限都打开 ->  确定

 

2.在命令行窗口运行以下两条命令(!自己路径下的!)

npm config set prefix "自己路径下node_global文件夹的路径"
npm config set cache "自己路径下node_cache文件夹的路径"

3.输入 npm config list 查看

3..在此电脑先右击 -> 点击属性

4..点击高级系统设置 -> 环境变量

3.在系统变量新建 NODE_PATH ,选择node_global文件的路径 ,node_modules需要手动输入,后面会自动生成

4.将NODE_PATH添加到path里去

5.最后在用户变量添加node_global(自己目录下的路径),npm全局配置完工。

三、安装脚手架

1.安装cnpm,修改镜像源(在管理员权限下安装,最好是在C:\Windows\System32下的命令窗口执行 

淘宝镜像源:https://registry.npmmirror.com

安装cnpm:
npm i -g cnpm --registry=https://registry.npmmirror.com
修改npm源:
npm config set registry https://registry.npmmirror.com
查看npm源:
npm config get registry

2.使用下载的cnpm安装vue脚手架(cnpm安装快一点)

cnpm i -g @vue/cli

3.检查安装是否成功 输入 vue -V  (V为大写) 或者 vue --version 

vue -V

如果在vscode终端报错的话,设置可以执行全局脚本:Set-ExecutionPolicy  RemoteSigned 

设置可以执行全局脚本:
Set-ExecutionPolicy  RemoteSigned 

四、创建第一个vue项目

1.创建一个新的项目(可能需要一点时间):

vue create "自己定义的项目名称"

 先后运行以下两条命令 

2.进入项目文件夹:

cd "自己定义的项目名称"

3.运行项目:

npm run serve

 这样vue项目就创建成功啦!

4.浏览器打开或者按住ctrl+鼠标单击:http://localhost:8080/


第一次写文章,可能存在许多不足的地方,如果有啥不足的地方欢迎大家到评论区留言,我看到了会第一时间回复的哈,还有安装过程中遇到的错误没例举出来,总之遇到问题不要慌,慢慢来,问题是死的,人是活的,冷静下来,所有问题都不是问题,慢慢学习之路,你我共同进步!!

  • 19
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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个

红包金额最低5元

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

抵扣说明:

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

余额充值