简单介绍 Vue 3.0 项目创建
一、前期转杯
- 确保电脑上已安装 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 项目创建的更多相关文章
- vue2.0与vue3.0项目创建
脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...
- Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转
1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...
- VUE 安装及项目创建
Vue.js 安装cnpm npm install -g 镜像 cnpm --registry=https://registry.npm.taobao.org 安装 vue.js cnpm insta ...
- springboot学习入门简易版二---springboot2.0项目创建
2 springboot项目创建(5) 环境要求:jdk1.8+ 项目结构: 2.1创建maven工程 Group id :com.springbootdemo Artifact id: spring ...
- cocos2dx3.0项目创建流程
cocos2dx3.0不是beta,新增了wp项目创建的支持 但不知道为啥非beta版本号的tools文件夹中取消了project-creator,可能有更改吧 没有这个工具还挺麻烦.就自己手动创建c ...
- VUE安装环境及项目创建
Vue环境安装配置 安装git工具,便于在wind电脑上操作命令行,自行在网上下载安装,(可以不安装)使用cmd. 安装node,检查node安装是否成功,在git工具中输入node -v(如果成功的 ...
- C#中Fun简单介绍及运用到项目中与缓存(本地缓存,Redis)结合使用
1.简单介绍Fun C#中Fun和Action有点类似,都是一个委托方法,不同的是Func是有返回值的,而Action没有. (T)此委托封装的方法的参数类型. 备注:详情了解Fun到(https: ...
- 简单介绍一下vue2.0
Vue Vue是用于构建用户界面的渐进框架.作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目. 另外Vue的核心库只专注于视图层,这样就更容易与其 ...
- vue2.0项目创建之环境变量配置
安装node 传送门 <node安装步骤>关于环境的配置,百度一大把 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm. ...
- ubuntu下code::blocks编译运行一个简单的gtk+2.0项目
在具体的操作之前,首先需要安装一些必要的软件.ubuntu下默认安装了gcc,不过缺少必要的Header file,可以在命令行中输入下面的指令安装build-essential套件:sudo apt ...
随机推荐
- FreeRTOS教程1 基础知识
1.准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) Keil µVision5 IDE(MDK-Arm) 野火DAP仿真器 2.学 ...
- IDE中使用Git提交代码报错:Push to origin/release-V2 was rejected
一.问题由来 当前项目开发好之后,已经正常稳定运行一两个月,在使用过程中基本上没在出现什么BUG.因此公司在讨论准备开发二期项目,自己 就在之前的基础之上,使用git创建了分支,一个分支release ...
- 探究WPF中文字模糊的问题:TextOptions的用法
有网友问WPF中一些文字模糊是什么问题.之前我也没有认真思考过这个问题,只是大概知道和WPF的像素对齐(pixel snapping).抗锯齿(anti-aliasing)有关,通过设置附加属性Tex ...
- Hibernate之list和iterator
在Hibernate3中将Session.find(),Session.iterator()换成:session.createQuery().list(),session.createQuery(). ...
- 云VR给当今的教育行业带来哪些契机
教育一直是国之根本大策,培养下一代高科技新型人才是新时代规划的重要建设目标.教育的授课方式也别出心裁,不断地涌现出教育的新模式.3DCAT 云VR别出心裁,为教育行业带来新的教学方式和简化管理的全新系 ...
- 记录--CSS 滚动驱动动画 scroll()
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 CSS 滚动驱动动画 scroll() animation-timeline 通过 scroll() 指定可滚动元素与滚动轴来为容器动画提 ...
- 在 PostgreSQL 中,解决图片二进制数据,由于bytea_output参数问题导致显示不正常的问题。
在 PostgreSQL 中,bytea_output 参数控制在查询结果中 bytea 类型的显示格式.默认情况下,bytea_output 的值为 hex,这意味着在查询结果中,bytea 类型的 ...
- C++ pieces
standard lib fmax double fmax (double x, double y); float fmax (float x, float y); long double fmax ...
- veriog之四位全加器
verilog之四位全加器 1.简易代码 module adder_4bit ( cout,sum,ina,inb,cin ); output[3:0] sum; output cout; input ...
- 开源鸿蒙(OpenHarmonyOS)代码下载及编译
开源鸿蒙的代码仓在码云上,可以通过以下命令下载源码并编译 本机安装虚拟机 如本地已经安装可以忽略此步 安装指导:https://thoughts.teambition.com/share/614c49 ...