搭建Vue3脚手架和使用

一、下载Nodejs及配置

下载链接：Node.js

如图，下载最新版本

双击安装，一直Next

可以使用默认路径，本例子中自行修改为d:\nodejs

点击Install安装

点击Finish完成

查看目录是否有以下的文件

打开控制命令行程序（CMD）,检查是否正常

此电脑-->属性-->高级系统设置-->环境变量-->path

则在自己安装的文件夹【D:\Development\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：

然后在cmd种运行以下2条命令

npm config set prefix "D:\Development\nodejs\node_global"

npm config set cache "D:\Development\nodejs\node_cache"

如下图，我们再来关注一下npm的本地仓库，输入命令npm list -global

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

输入命令npm config list 显示所有配置信息，我们关注一个配置文件

找到C:\Users\zwl\.npmrc，使用文本编辑器编辑它，可以看到刚才的配置信息

检查一下镜像站行不行命令: npm config get registry

检查一下镜像站行不行命令（cmd使用管理员）：npm info vue 看看能否获得vue的信息

解决 npm 版本过高：npm install 版本太高导致的错误，用命令行回退版本 - 跛豪丶 - 博客园

npm install npm@6.14.10 -g

注意，此时，默认的模块D:\Development\nodejs\node_modules 目录

将会改变为D:\Development\nodejs\node_global\node_modules 目录。

在path中配置：D:\Development\nodejs\node_global与D:\Development\nodejs\node_global\node_modules

二、安装脚手架

注意：cmd要以管理员身份运行下面命令

最新版本运行：npm install -g @vue/cli

安装3.0以前的旧版本运行：npm install -g vue-cli@2.x

安装3.0及其以后版本运行：npm install -g @vue/cli@x.x.x

我这里安装最新版：

下载中：

下载结束：

检查vue是否下载成功：

执行：vue -V

三、使用教程

1.cmd管理员进入选择想要创建项目的文件，在运行 vue ui，就会出现图形化管理

会自动跳转一个网页如下：

选择创建，进入创建页面：

点击创建新项目，书写好项目名，点击下一步：

这里我们选择手动设置，并点击下一步：

配置如下，并点击下一步：

选择Vue版本，根据需求选择不同的版本：

创建项目中（需要等几分钟）：

创建成功进入如下图：

选择任务-->server-->运行：

运行成功，点击启动：

启动成功：

可通过Visual Studio Code打开运行：npm run serve

运行完显示登录的地址：

访问： http://localhost:8081/

搭建Vue3脚手架和使用相关推荐

React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览搭建工程脚手架准备工作安装node 安装git 安装一款前端IDE 推荐VSCode, ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
Vite2.0搭建Vue3移动端项目
Vite2.0搭建Vue3移动端项目一.搭建包含内容 vite版本.vue3.ts.集成路由.集成vuex.集成axios.配置Vant3.移动端适配.请求代理二.步骤 vite+ts+vue3只 ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue搭建cli脚手架环境（出现问题及解决，主要是node版本低）
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) 参考文章: (1)vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) (2)https://www.cnblogs. ...
搭建vue-cli脚手架
一波三折,本应该从易到难才不会容易放弃,折腾了几天才回到正轨.终于结束了以普通引入javascript文件的方式学习的过程,现在搭建vue-cli脚手架,接触webpack,npm,nodejs,ba ...
从零搭建开发脚手架 Spring Boot集成Mybatis-plus之一
文章目录简介特性框架结构依赖集成依赖配置编码开始使用核心功能代码生成器添加依赖编码编写配置自定义模板引擎自定义代码模板自定义属性注入字段其他信息查询注入实战总结常 ...
搭建Vue3 后台管理框架 —— 登录页面
声明本文章只是自己搭建后台框架得一个笔记,不作为任何项目搭建指南,大家看着乐呵乐呵就行. 之前把项目简单配置了依赖路由算是基础打出来了细节肯定还需要打磨,然后就是脸面(登录页面),各种疯狂查询搜 ...
初学者搭建Vue脚手架工程
初学者搭建Vue脚手架工程 1.在前端的知识海洋里,各种前端框架自动化测试满天飞,正如在当下想不被淘汰,那只有不断的去学习心得知识,所以就有了今天的一次学习vue搭建脚手架的记录. 2.第一步:搭建v ...

搭建Vue3脚手架和使用

搭建Vue3脚手架和使用相关推荐

最新文章

热门文章