vue 从零到创建前端项目

vue 创建前端项目

安装VScode

直接在官网进行下载https://code.visualstudio.com/

首页
请添加图片描述

vscode设置成中文

默认为英文,可以通过下面的操作改为中文

1.按快捷键"Ctrl + Shift + P"(也可以使用点击图片的位置)

请添加图片描述
请添加图片描述
2.输入"configure Display language",然后回车

3.选择中文就可以了,可能会需要重启,重启这个软件就好了

请添加图片描述
如何不想设置,也可以通过在拓展商店中安装中文插件就可以
请添加图片描述

到这一步也就安装好常用的工具,但是还不能创建项目之类的,也就是只有一个工具了。在这我讲解一下如何安装前端需要的。

打开终端

在终端中点击 新建终端 ,就可以打开一个终端窗口,可以在里面使用命令符

请添加图片描述请添加图片描述
切换至cmd命令终端

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这切换就可以了

卸载node

如果电脑中已经安装了node,建议卸载之前安装的,否则可能会产生问题,比如无法切换node版本,提示exit staus 145 错误等。

安装nvm

项目依赖的node版本是不一样的,但是原始切换版本很麻烦,需要手动去修改环境变量 所以有个node版本的切换器,会很方便, nvm就是这样一个工具

安装地址

Releases · coreybutler/nvm-windows (github.com)

请添加图片描述

  • 注意这里有noinstall和setup版,区别是前者是免安装,需手动配置,新手推荐使用后者,免配置

选择NVM的安装路径。可以按照个人习惯,自行选择安装路径。

选择NodeJS的Symlink (符号链接)文件夹的位置,用于生成NodeJS的映射目录。

安装之后可以在cmd中使用 “nvm -v”,如果提示版本号则证明安装成功了

请添加图片描述

修改nvm的安装配置

因为nvm默认安装node使用的是国外的镜像,为了避免安装失败,所以要修改一下nvm配置,首先打开你的nvm所在文件夹,用编辑器打开settings.txt

请添加图片描述

然后在文件里面添加两条内容,分别是node和npm的下载源,如下:

node_mirror https://npm.taobao.org/mirrors/node/
npm_mirror https://npm.taobao.org/mirrors/npm/

在这里插入图片描述

安装node

  • 在终端或命令cmd输入 nvm install [version] ,然后回车即可,这里的version指的是你想要安装的node版本,下同。
  • 安装完成后使用nvm ls available查看已安装的node版本
    在这里插入图片描述
CURRENT:为当前最新的版本
LTS:为稳定版本
OLD:历史版本
建议选择LTS稳定版的
  • 使用nvm use [version]来使用你选择的node版本
  • 也可使用nvm uninstall [version]卸载node版本

例如nvm install 20.10.0则是安装v20.10.0版本的node,而nvm uninstall 20.10.0为卸载v20.10.0版本的node

安装完成后在命令行工具输入node -vnpm -v检查是否安装成功,若命令行输出版本号则说明安装成功。

请添加图片描述

配置npm

首先打开你安装nvm时创建的nodejs文件夹(需要使用nvm安装某个node版本后才会出现nodejs文件夹),然后在里面创建node_globalnode_cache两个文件夹。在这我创建nvm时多了一层,所以我放在同层了。

在这里插入图片描述

然后在命令行工具执行下面两条命令来修改npm全局安装包和缓存的位置:

修改npm的包的全局安装路径,

npm config set prefix "D:\Program Files\nvm\node_global"

修改npm的包的全局cache位置

npm config set cache "D:\Program Files\nvm\node_cache"

查看当前npm包的全局安装路径

npm prefix -g 

查看当前npm包的全局cache路径

npm config get cache

最后配置环境变量

此电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统变量 -> path ->编辑 - > 新增路径 - D:\Program Files\nvm\node_global"(路径可以根据npm prefix -g查看)

请添加图片描述

更多的nvm命令

nvm list :列出所有已安装的 node 版本
nvm list available :显示所有可下载的版本
nvm install stable :安装最新版 node
nvm install [node版本号] :安装指定版本 node
nvm uninstall [node版本号] :删除已安装的指定版本
nvm use [node版本号] :切换到指定版本 node
nvm current :当前 node 版本
nvm alias [别名] [node版本号] :给不同的版本号添加别名
nvm unalias [别名] :删除已定义的别名
nvm alias default [node版本号] :设置默认版本

安装vue脚手架

执行命令

安装
npm install -g vue
npm install -g @vue/cli

(如果执行失败,提示vue不是内部命令,需要卸载重新安装)

卸载
npm uninstall vue-cli -g

检验是否安装成功

vue -V

下面是执行成功
在这里插入图片描述

创建前端项目

我这里是使用vue脚手架通过ui界面创建的项目

在命令行中执行vue ui,这个目录是我专门存储项目的路径

请添加图片描述

然后跳转到这个网址

请添加图片描述

在这个里面就可以创建项目了

请添加图片描述

在这里插入图片描述

请添加图片描述

如果选择手动,则需要自己选择功能,我这里选择的是default vue3,选择后就可以直接创建项目了

请添加图片描述

创建之后,就可以进行自己的操作了,如果想要添加其他的功能,也可以直接在这个页面进行对应的操作

启动项目

创建好之后,回到vscode,点击上面的文件 -> 打开文件夹,选择对应的文件即可

请添加图片描述

请添加图片描述

点击启动,项目就可以启动了,然后在浏览器中打开Local的网址就可以访问了

请添加图片描述
请添加图片描述

  • 37
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值