【vscode创建vue+vite项目】

1,200 阅读1分钟

前提条件

  • 已安装 16.0 或更高版本的 Node.js

1、检查node 和npm版本信息

同时按window+R键,输入cmd,打开命令提示符窗口

e5c5c7f2b51afdcaa3f2acc8bc685c4.png

输入: node –v (查看安装的node版本)

d736a462819b4d242a83c8607b2d89b.png

输入: npm –v (查看安装的npm版本)

35c27e435b73570eeae578e02e7b696.png

通过create vite搭建vue3 项目

打开文件所在目录 点击该文件的搜索框->输入cmd后出现以下页面

c6ab669bd0213ac9caf0c54d0d354a5.png 3c392f0f5ef49f051111b5a390c3e4d.png 25a310d54f75da2933fd37137610dae.png 94dde6bd6e9473d2eb55033a1ecb06a.png

在命令行输入:npm create vite@latest

65c4930d76e75c035ee7d0234d08098.png

根据自己的需求创建项目

ecaf1381242fa45a586cf0853e86be7.png

按照提示依次输入命令(要求不同命令行的要求也不同)

29fa20528ce9d8dbb5291534785c5e1.png

fe5323053e45aa5380c63dde95dd51a.png

复制网址到浏览器,一般为 http://localhost:5173/

5c5d5f926252944c1639ca8191bd527.png

成功创建项目输入网址之后出现该页面(官方版本改变可能会改变样式) 2c1acd36b6f18cb255a31bcd0451779.png

注意:如果下载过慢

原因: vue init 使用的是 npm源(国外的源,所以国内的网络下载会很慢)

注意:如果命令行运行不了npm命令或vue命令,需要以管理员身份运行cmd

1、检查npm源,如果表示taobao的npm源,则需要切换npm源

输入npm config get registry查看设置npm源

设置淘宝镜像源npm config set registry registry.npm.taobao.org

安装cnpm命令 不会改变npm的源npm install -g cnpm registry=registry.npm.taobao.org

检查是否设置成功 输入npm config get registry

安装成功显示registry.npm.taobao.org/

03ac6180c5ac222ff70babb947f8435.png