VUE3.0从安装到应用 (1)

最新推荐文章于 2023-08-26 23:09:11 发布
最新推荐文章于 2023-08-26 23:09:11 发布
阅读量141 收藏
点赞数
分类专栏： 脚手架 vue3.0 文章标签： vue npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z2433416440/article/details/114633659
版权

VUE3.0从安装到应用 (1)

第一步：安装脚手架
先查看vue版本，package.json这个里面有
在这里插入图片描述
如果是2.0升级一下

升级vue版本命令

npm view vue versions // 查看vue版本，安装最新稳定版
在这里插入图片描述

npm install -g vue@ +版本号

第二步：创建项目
创建命令
create-vite-app vue3-app
下载依赖
npm i
启动
npm run dev
在这里插入图片描述
在这里插入图片描述

这时已经创建成功然后在文件夹就能看到了

在这里插入图片描述

如果对你有帮助，麻烦动动发财的小手点个赞吧！

+++++
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0的最新安装（避坑指南）
qq_53051594的博客
03-03 2133
解决vue3.0安装中遇到的各种问题
Vue3.0配置多页面应用
03-17
在配置Vue3.0的多页面应用时，我们通常会涉及到以下几个关键文件： 1. **vue.config.js**：这是Vue CLI自定义配置文件，用于扩展默认配置。在多页面应用中，我们需要在此配置`pages`对象，列出所有的入口文件，例如...
vue3.0 安装
qq_39896862的博客
09-23 280
安装 打开命令行工具输入： npm init @vitejs/app vue-cli 安装 对于 Vue 3.0，Vue CLI 版本也有升级，目前需要将vue-cli升级到 4.5.x 版本： yarn global add @vue/cli@4.5.11 // yarn 安装升级vue cli # 或者 npm install -g @vue/cli@4.5.11 // npm 安装升级vue cli 如果安装失败，可以先将本地 @vue/cli 卸载。 yarn remove global @vu
Vue3.0安装
king06king的博客
09-09 348
Vue3.0安装步骤
安装Vue3.0
qq_45376290的博客
01-26 242
1.通过script标签引用： <script src="https://unpkg.com/vue@next"></script> 2、npm安装，命令如下： npm install vue@next 3、cli安装，需要重新安装全局的@vue/cli，命令如下： yarn global add @vue/cli # 或者 npm install -g @vue/cli 然后，在vue的项目里执行如下命令来更新： vue upgrade --next 4、vite安装，vi
vue3.0项目的安装
blue_5_3的博客
10-28 3170
第一步：如果你之前用的是vue2.0，那么需要删除（没有则跳过第一步） npm uni -g vue-cli 第二步：安装vue3.0 npm i -g @vue/cli 第三步：创建项目 vue create projectname（项目名称） 在创建项目时有三个选项供你选择，我选择的是中间的vue3.0， 在这一步中我出现了问题， 我在安装的时候无法使用上下箭头控制选项。查阅资料，是这样说的，在window上使用在window上使用Git Bash，交互提示符并不会工作...
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
vue3.0pdf在线预览
02-25
Vue3.0带来了许多性能优化和新特性，旨在提高开发效率和应用性能。PDF在线预览是Web应用程序中常见的一项功能，允许用户在不下载文件的情况下查看PDF内容。在Vue3.0中实现PDF在线预览，可以充分利用其新特性，如...
全新Vue3.0全家桶 零基础入门到项目实战
06-30
本课程将基于 Vue3.0 正式版，从Vue基础语法入手，全面掌握 Vue3.0 全家桶技术栈，并结合实战项目开发，让你拥有Vue3.0项目开发经验，更好的掌握Vue开发企业项目的流程 。 本课程共包括三个模块 一、Vue基础篇 本...
Vue 3.0 基础框架
03-23
1. 安装Vue 3.0：使用npm或yarn安装最新版本的Vue。 2. 引入Element Plus：同样通过npm或yarn安装，并在main.js文件中引入并使用。 3. 配置Echarts：安装echarts库，并在需要的组件内按需导入和使用。 4. 创建组件：...
vue3安装
cc_xxo的博客
03-06 111
创建Vue3.0工程 官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-creat 1、使用vue-cli创建 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上 vue --version 安装或升级@vue/cli npm install -g @vue/cli 创建 vue create vue_test 启动 cd vue_test npm run serve 2、使用 vite 创建 官方文档：htt
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 6万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
VUE3.0从安装到应用 (3)
z2433416440的博客
03-10 176
生命周期 vue2.x router全局引入在文章2里面有 import home from './home .vue' export default { ...applying, name: "applying", data() { return { ifShow:true } }, mounted() {}, created(){ }, methods:{}, } vue3 vue文件 <div>首页</div> <
怎么安装一个简单的vue3.0框架。整个流程.::
qq_37805832的博客
09-02 888
第五步：选择Manually select features这个选项,然后点击。按住键盘上面的PgDn这个键.作者：陈业贵 华为云享专家 51cto(专家博主 明日之星 TOP红人) 阿里云专家博主。第十步：然后一直点击下去。等安装成功后，怎么运行呢？第四步：创建vue项目命令。vue项目名称为cyg。第十一步:进入cyg这个目录下!第一步：安装node.js最新版本（傻瓜式安装）第八步：点击键盘上面的nenter下。第六步：按住空格键即可选中。
vue3.0+vite+vuex+vue-router的搭建
南梓哶的博客
08-25 1156
一、搭建vite+vue3 # npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, 需要额外的双横线： npm init vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue cd my-vue-app 进入并npm i 安装依赖 之后npm run dev 启动 二、vue-router 安装4.
Vue3.0环境搭建及部分文件功能解释
06-13 789
文章目录一、基础环境搭建安装Node.js安装 npm包管理器二、搭建Vue项目环境全局安装Vue-Cli安装Webpack三、文件功能解释 一、基础环境搭建 安装Node.js 前往Node.js的官网下载LTS版本的Node.js并安装 安装完成后在命令行中输入 node -v 出现如下界面及成功安装 安装 npm包管理器 打开终端并进入管理员模式 sudo su 输入密码后进入管理员模式 借助cnpm包管理器安装Hexo博客框架 由于国内镜像源较慢，这里使用淘宝的镜像源 打开终端输入如下指
VUE3.0 学习之旅
jiangbinwangyi的博客
08-10 110
VUE3.0 学习之旅 废除了filter，推荐统一使用methods <template> <!-- ✓ GOOD --> {{ filter(msg) }} {{ filter(msg, '€') }} {{ filterB(filterA(msg)) }} <div v-bind:id="filter(msg)"></div> <div v-bind:id="filter(msg, '€')"></div&g
vue3.0 项目创建
qq_38552198的博客
08-06 167
1.环境搭建 用git工具 git clonevue-next 命令行 运行yarn或npm i 2.检测vue/cli 是否最新， 更新vue/cli cnpm i -g @vue/cli to update 3.创建项目 ，vue3demo为项目名，可自定义 。或者运行vue ui，会打开界面根据需要选择插件安装 vue create vue3demo 4.添加vue next vue add vue-next 此时依赖为最新 建成目录 ...
Vue3.0极速入门 - 环境安装&新建项目
最新发布
xsq123的专栏
08-26 379
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue 3.0 安装 【Vue3 从零开始】
2201_75866484的博客
02-18 1170
将 Vue.js 添加到项目中有三种主要方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值