当前位置:首页 > 技术文章 > 正文内容

Vue3教程 1.搭建及安装步骤(vuecli3安装)

zonemu2个月前 (07-28)技术文章26

简介

Vue3 官方给出了两种安装方式,一种是用脚手架安装,一种是vite。以下是安装时需要注意的,如果你安装失败,看是否是以下几点导致的:

1.node版本太旧了,或者要清除安装的缓存

2.yarn, cnpm是否安装更新

3.网络不好,推荐使用淘宝镜像

使用Vue脚手架创建Vue3项目

卸载之前Vue 2的脚手架

npm uninstall vue-cli -g
# OR
yarn global remove vue-cli

全局安装最新版本的Vue Cli

cnpm install -g @vue/cli
# OR
yarn global add @vue/cli

创建Vue3项目

vue create vue3-demo

使用Vite创建项目

yarn create vite-app <project-name>
# OR
npm init vite-app <project-name>

根据选项来创建你的项目

根据提示依此敲入如下命令

# 进入目录
cd vue3-mall

# 安装依赖
yarn

# 开启项目
yarn dev

运行成功如下图

页面展示

相关文章

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从...

Vue3快速入门(vue3快速上手)

  1.核心语法  1. 1选项式和组合式的区别  Vue2的API设计是Options(选项)风格的。  Vue3的API设计是Composition(组合)风格的。  Options类型的 API...

编写简单的.gitlab-ci.yml打包部署项目

服务器说明:192.168.192.120:项目服务器192.168.192.121:GitLab为了可以使用gitlab的cicd功能,我们需要先安装GitLab Runner安装GitLab Ru...

jenkins2.107+tomcat8+jdk1.8的安装和发布代码3种方式

jenkins2.107+tomcat8+jdk1.8的安装和发布代码3种方式如果对运维课程感兴趣,可以在b站上或csdn上搜索我的账号: 运维实战课程,可以关注我,学习更多免费的运维实战技术视频1....

web前端入门:css+html5+javascript同时学可以吗?

HTML+CSS+JS是前端基础核心知识,肯定是都要学的。在web前端中,HTML是结构标准,CSS是样式标准,JS是行为标准,三者缺一不可。说的直白点,HTML就是骨架,CSS就是皮肤,JS就是灵魂...

15款测试html5响应式的在线工具(测试类h5)

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面...