一、前期转杯

  • 确保电脑上已安装 node.js。

    可通过命令 npm --version进行查询,如果展示了版本号,则说明已安装,若提示 npm 不是有内部或外部命令,也不是可运行的程序,则说明未安装,可进入官网下载并进行安装。
  • 确保已安装 Vue CLI。

    可通过命令 vue --V 查看版本号,如果返回了版本号,则说明已安装,若提示 vue 不是有内部或外部命令,也不是可运行的程序,则说明未安装 Vue CLI, 可使用命令:npm install -g @vue/cli 进行安装。

二、创建 vue 项目

在命令行窗口输入命令 vue create [web名称] 后,点击回车(Enter)键。进入如下界面

可以使用方向键上/下进行选项选择,本文只是是基于 vue3 的项目创建,故此处直接点击 回车(Enter)键,此时将进行项目创建。

等待操作完成后,用过 cd 目录路径 ,再输入命令 npm run serve,将出现如下界面,即表示站点已正常运行。

此时在浏览器地址栏中输入 界面上的地址,即可访问 web。如下图:

三、过程中可能存在的问题及解决方案

  • 证书过期

    问题:安装 Vue CLI 提示证书过期,如下图



    解决方案:因淘宝原镜像地址 https://registry.npm.taobao.org 已过期,现已变更为 https://registry.npmmirror.com。可使用命令 npm config set registry https://registry.npmmirror.com 进行镜像地址更换。
  • 包名无效

    问题:创建项目时,提示项目名称无效,如下图



    解决方案:项目名称不能包含大写字母

简单介绍 Vue 3.0 项目创建的更多相关文章

  1. vue2.0与vue3.0项目创建

    脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...

  2. Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

    1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...

  3. VUE 安装及项目创建

    Vue.js 安装cnpm npm install -g 镜像 cnpm --registry=https://registry.npm.taobao.org 安装 vue.js cnpm insta ...

  4. springboot学习入门简易版二---springboot2.0项目创建

    2 springboot项目创建(5) 环境要求:jdk1.8+ 项目结构: 2.1创建maven工程 Group id :com.springbootdemo Artifact id: spring ...

  5. cocos2dx3.0项目创建流程

    cocos2dx3.0不是beta,新增了wp项目创建的支持 但不知道为啥非beta版本号的tools文件夹中取消了project-creator,可能有更改吧 没有这个工具还挺麻烦.就自己手动创建c ...

  6. VUE安装环境及项目创建

    Vue环境安装配置 安装git工具,便于在wind电脑上操作命令行,自行在网上下载安装,(可以不安装)使用cmd. 安装node,检查node安装是否成功,在git工具中输入node -v(如果成功的 ...

  7. C#中Fun简单介绍及运用到项目中与缓存(本地缓存,Redis)结合使用

     1.简单介绍Fun C#中Fun和Action有点类似,都是一个委托方法,不同的是Func是有返回值的,而Action没有. (T)此委托封装的方法的参数类型. 备注:详情了解Fun到(https: ...

  8. 简单介绍一下vue2.0

    Vue Vue是用于构建用户界面的渐进框架.作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目. 另外Vue的核心库只专注于视图层,这样就更容易与其 ...

  9. vue2.0项目创建之环境变量配置

    安装node 传送门 <node安装步骤>关于环境的配置,百度一大把 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm. ...

  10. ubuntu下code::blocks编译运行一个简单的gtk+2.0项目

    在具体的操作之前,首先需要安装一些必要的软件.ubuntu下默认安装了gcc,不过缺少必要的Header file,可以在命令行中输入下面的指令安装build-essential套件:sudo apt ...

随机推荐

  1. k8s实战之MySQL单实例部署

    前面我们学习了k8s入门系列文章,了解了k8s的一些基础概念以及怎么使用.本篇文章将进行一个小小的实战,使用k8s来部署单机版的mysql数据库,基本涵盖到前面讲到的Namespace.Pod.Dep ...

  2. IDEA 报错 project is already registered

    1.环境&背景 有时候IEDA下一个工程中想引入多个项目,只能添加多个modules. 版本:IDEA 2020.2 构建:gradle 2.问题 有时候删掉了某个项目再导入时报错 proje ...

  3. 1 - RTOS简介&规范&任务创建

    对外部响应能力: 实时(规定时间内)操作系统 , 有强(飞机系统)弱(信息采集系统)之分 与分时(顺序时间片)操作系统 FreeRTO实时操作系统 支持抢占式调度,合作式调度和时间片调度:内核大小在4 ...

  4. RGB、HSV、HSL和CMYK颜色空间

    目录 简介 RGB(红绿蓝)颜色空间 HSV(色调.饱和度.亮度)颜色空间 HSL(色调.饱和度.亮度)颜色空间 CMYK(青.品红.黄.黑)颜色空间 简介 这四种颜色空间在不同的应用领域有不同的用途 ...

  5. ubuntu环境下python下使用OpenCV库读取USB摄像头的画面

    一 概念 OpenCV是一个开源的计算机视觉和机器学习软件库.它可以使用pip命令行中的以下命令安装:"pip install opencv-python" 这个做视觉处理,非常的 ...

  6. Web Audio API 第1章 基础篇

    Web Audio API 第1章 基础篇 我查了一下 Web Audio API 蝙蝠书居然在 2013 年就出版了 我又看了一下我的"豆瓣读书"频道内,这本书加入到" ...

  7. YUV亮度扫描小工具,如何确定尺寸以及错误尺寸下图像发生什么变化

    地址https://github.com/bbqz007/zhelper-wxWidgets 当你有一个帧yuv,但却不知道长宽还有格式时,本demo可以帮你通过扫描Y分量灰度图,确定长宽,然后选择合 ...

  8. .NET周刊【3月第2期 2024-03-17】

    国内文章 开源.NET8.0小项目伪微服务框架(分布式.EFCore.Redis.RabbitMQ.Mysql等) https://www.cnblogs.com/aehyok/p/18058032 ...

  9. 第144篇:阿里低开项目 init方法

    好家伙,  demo-general项目运行后主界面如下   解析阿里低开引擎中的初始化方法init 拆解项目来自阿里的lowcode engine目录下的 demo general项目 0.找到入口 ...

  10. TP6框架--EasyAdmin学习笔记:列表调用搜索,开发常见问题记录

    这是我写的学习EasyAdmin的第五章,这一章我给大家分享下列表调用搜索的相关知识,并记录说明下开发时碰到的常见问题 首先说明下如何在页面中调用layui的搜索,效果如下: 代码如下: define ...