当前位置: 首页 > news >正文

vscode构建Vue3.0项目(vite,vue-cli)

构建Vue3.0项目

  • 构建Vue3.0项目
    • 1.使用Vite构建vue项目的方法以及步骤
      • 1. 安装vite
      • 2. 运行vite + vue 项目
      • 3.说明
    • 2.使用vue-cli构建vue项目的方法以及步骤
      • 1.安装全局vue cli —— 脚手架
      • 2、VSCode
      • 3.报错
      • 4.运行

构建Vue3.0项目

1.使用Vite构建vue项目的方法以及步骤

1. 安装vite

npm init vite@latest   npm构建vite项目
yarn create vite   yarn构建vite项目

依次需要配置项目名 、框架选择、原生和ts版本的选择

注意取名字,删除他的默认名称写自己的

在这里插入图片描述

在这里插入图片描述

2. 运行vite + vue 项目

cd vue-vite进入创建的项目包

npm i/ yarn 下载项目所需的依赖

npm run dev / yarn dev 运行项目

到这一个vite + vue的项目最基本的框架就已经搭建完成了

在这里插入图片描述

在这里插入图片描述

3.说明

Vite 需要 Node.js 版本 14.18+、16+。但是,某些模板需要更高的 Node.js 版本才能工作,如果您的包管理器发出警告,请升级。

2.使用vue-cli构建vue项目的方法以及步骤

1.安装全局vue cli —— 脚手架

管理员运行cmd窗口输入

npm install vue-cli -g

2、VSCode

打开VSCode ,新建终端(注意项目想要存放的路径)
在这个终端里输入

vue init webpack 项目名

然后一直按确认或输入y按确认,等待项目初始化

3.报错

这时遇到了报错:无法加载文件…

解决报错:以管理员身份打开Windows PowerShell
输入set-ExecutionPolicy RemoteSigned
选择Y 或者A,就可以了

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.运行

cd vue-cli进入创建的项目包

在终端输入npm run dev,项目就跑起来啦

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

http://www.lryc.cn/news/11307.html

相关文章:

  • 【2023】华为OD机试真题Java-题目0215-优雅数组
  • 通过Prowork每日自动提醒待处理工作任务
  • Linux自定义系统服务
  • mongodb lambda 查询插件
  • C++设计模式(16)——责任链模式
  • springmvc+jsp电影院购票售票选座推荐网站java ssm
  • ASEMI高压MOS管4N65SE,4N65SE参数,4N65SE特征
  • 第46章 自定义静态与数据库动态授权依赖注入的定义实现
  • Go语言面试题
  • Kubernetes入门级教程
  • 15个顶级思维模型
  • 外贸谷歌优化,外贸google SEO优化费用是多少?
  • 华为OD机试 - 统计匹配的二元组个数(Python) | 机试题算法思路
  • Java 日志简介
  • HTTPS协议原理---详解六个加密方案
  • 纯css实现坤坤经典动作-“铁山靠”
  • Linux 操作系统原理 — NUMA 体系结构
  • cesium学习记录01
  • Linux延时队列工作原理与实现
  • 【Python】scipy稀疏矩阵的奇异值分解svds
  • 网络安全等级保护基础知识汇总
  • ros1使用过程中遇到的问题记录
  • centos7给已有分区进行扩容
  • package.json
  • 【项目精选】户籍管理系统(视频+论文+源码)
  • 【IP技术】网络安全防护措施
  • 基于AIOT技术的智慧教室智能物联管控系统设计与实现(提纲)
  • C 指针的深造
  • 大数据之-Nifi-应用场景2-2_设置putfile处理器自动创建目标文件夹_以及存在重复文件时自动覆盖---大数据之Nifi工作笔记0006
  • buuctf Web 下