vue3项目创建初步阶段---软件和插件下载安装及环境部署

1.在vscode官网(https://code.visualstudio.com/)下载相应电脑系统版本接着傻瓜式安装

2.相关插件{

Auto Close Tag;

Auto Rename Tag;

C# Utilities;

Chinese (Simplified);

CSS Formatter;

ESLint;

Git History;

npm Intellisense;

Path Intellisense;

Vue VSCode Snippets;

}

3.node.js的环境安装

①下载npm包管理器(https://nodejs.cn/)傻瓜式安装

②检测是否安装成功在cmd控制台查询node和npm版本号如果出现则成功

node --version;

npm --version;

③在cmd控制台安装npm镜像;

npm config set registry https://registry.npm.taobao.org/

查看是否安装好

npm config get registry;

4.在cmd控制台安装vue的脚手架

cnpm install -g @vue/cli

当出现 cnpm为不是系统命令时:

①在npm安装目录下添加node_cache和node_global两个文件

如果安装的不是在c盘,在系统环境变量中配置node_global的路径

E:\prodect\vscode\npm\node_global代替原c盘路径;

在cmd控制台设置prefix和cache;

npm config set prefix “E:\prodect\vscode\npm\node_global”

npm config set cache "E:\prodect\vscode\npm\node_cache"

查看先关配置是否成功

npm config list

修改创建的文件node_global的权限全部添加

如果遇到一下问题解决方案:

最后安装脚手架

cnpm install -g @vue/cli

如果遇到

检查E:\prodect\vscode\npm\node_global安装目录下是否有vue文件

有说明没有问题稍等一会

再卸载@vue/cli

cnpm uninstall -g @vue/cli

再安装

cnpm install -g @vue/cli

再查看版本号

vue -V

出现版本号说明成功了

再重启vscode再次查询vue-v版本号

没问题就创建项目

vue create vue3-app

依据自己的需求选择创建的项目

创建好后

安提示输入蓝色命令启动项目

最后在浏览器输入出来的地址 http://localhost:8080/#/

及成功.