怎样创建vue项目(分别基于vue-cli和vite两种的创建方式)

一、基于vue-cli脚手架创建

1、安装node.js

1、首先需要安装node.js,推荐下载地址:Node.js

2、检查是否安装成功,使用打开黑窗口的快捷键window+R,输入cmd,在黑窗口输入node -v,如果输出版本号,就说明安装node环境成功,

2、vue-cli搭建Vue开发环境

Vue CLI:命令行界面,俗称脚手架,Vue CLI 是一个基于webpack实现的,Vue CLI 是一个官方发布vue.js项目脚手架,使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

vue-cli的使用前提:安装过Node环境和Webpack

webpack的全局安装:黑窗口输入npm install webpack -g

(1)安装Vue CLI:命令行输入npm install -g@vue/cli
npm install -g @vue/cli
(2)检查是否安装成功:命令行输入vue --version,输出版本号就说明安装成功

3、创建vue项目

(1)、在想要创建项目的文件夹中输入cmd打开命令行并输入vue create "文件名"

(2)进入该页面,按需进行选择和配置

(3)出现以下页面,即为创建成功

4、启动vue项目

两种启动方式:

(1)命令行启动:

(2)把项目拉到vscode中,打开终端

首先,使用npm i 或npm install :安装依赖,根据项目中的package.json文件自动下载项目所需的全部依赖。

查阅了其他文章发现这两种有些许区别:

(2)运行:不同的项目的运行命令不同,可以在package.json中进行查看

可得该项目的运行命令为:npm run serve

 二、基于vite创建(官方推荐)

1、什么是vite?

vite是新一代前端构建工具,和webpack是等价的,构建速度比webpack要快,对TypeScript、JSX、CSS等不用配置什么东西,可以直接进行使用。vite的创建过程是按需编译。

 2、创建命令:

npm create vue@latest

 3、具体配置:

 1.创建命令
npm create vue@latest

 2.具体配置
配置项目名称
Project name: vue3_test


是否添加TypeScript支持
 Add TypeScript?  Yes


是否添加JSX支持
Add JSX Support?  No


是否添加路由环境
Add Vue Router for Single Page Application development?  No


是否添加pinia环境
Add Pinia for state management?  No


是否添加单元测试
Add Vitest for Unit Testing?  No


是否添加端到端测试方案
Add an End-to-End Testing Solution? » No


 是否添加ESLint语法检查
Add ESLint for code quality?  Yes


是否添加Prettiert代码格式化
Add Prettier for code formatting?  No

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/343042.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Triangulated Surface Mesh Simplification 三角表面网格简化

文章目录 Triangulated Surface Mesh Simplification 三角表面网格简化1 介绍2 简化过程概述3 成本策略3.1 Lindstrom-Turk 成本和布局策略3.2 Garland-Heckbert 成本和布局策略3.3 成本策略政策 4 应用程序编程接口4.1 API概述4.2 强制参数4.3 可选的命名参数4.4 调用示例 5 例…

蓝桥杯省赛无忧 竞赛常用库函数 课件5 排序

01 sort简介 02 sort的用法 sort(起始地址&#xff0c;结束地址的下一位,比较函数);默认用小于号#include<bits/stdc.h> using namespace std; int main(){int a[1000];int n;//读取数组大小cin>>n;//读取元素for(int i1;i<n;i)cin>>a[i];//对数组进行排…

美团2024届秋招笔试第一场编程真题(js版本)

1.小美的外卖订单 简单的加法逻辑&#xff0c;需要注意的是各个数据的边界问题 折扣价不能超过原价减的价格不能超过满的价格满减优惠仅限原价购入 const rl require("readline").createInterface({ input: process.stdin }); void (async function () {let count…

适合PC端的7款最佳时间规划、项目管理软件

分享PC端7类主流的时间管理规划软件&#xff1a;PingCode、Worktile、Todoist、Pomodoro Timer 、Toggl等。 一、时间管理软件的类型 时间管理软件可以根据其功能和应用场景被划分为几种不同的类型。每种类型的软件都旨在帮助用户以不同的方式更有效地管理和分配他们的时间。以…

3D成像:光学的再次创新

欢迎扫码关注GZH《光场视觉》 前言&#xff1a;光学一直是科技创新的重头戏&#xff0c;智能手机摄像头经历了2D时代像素和个数的倍增&#xff0c;孕育了大立光等优质公司。3D成像技术的成熟拉开了二维向三维升级的帷幕&#xff0c;有望带动光学创新大革命&#xff08;绝非“微…

Python - 操作 docx

文章目录 使用库 : python-docx 官方文档&#xff1a;https://python-docx.readthedocs.io 安装 pip install python-docx提取 docx from docx import Documentdoc Document(file_path) text "" for para in doc.paragraphs:text para.text "\n"创建…

8. 《自动驾驶与机器人中的SLAM技术》基于保存的自定义NDT地图文件进行自动驾驶车辆的激光定位

目录 1. 为 NDT 设计一个匹配度评估指标&#xff0c;利用该指标可以判断 NDT 匹配的好坏。 2. 利用第 1 题的指标&#xff0c;修改程序&#xff0c;实现 mapping 部分的回环检测。 3. 将建图结果导出为 NDT map&#xff0c;即将 NDT 体素内的均值和协方差都存储成文件。 4.…

Android系统remount功能的实现原理

前言 remount 是 Android 系统中的一个命令&#xff0c;用于重新挂载文件系统为可读写模式。在 Android 设备中&#xff0c;大多数文件系统默认是以只读模式挂载的&#xff0c;在这种模式下&#xff0c;无法修改或删除文件。使用 remount 命令可以将文件系统重新挂载为可读写模…

种草文案怎么写?三大万能公式直接套用

当我们浏览种草文案时&#xff0c;会不由自主就被内容所吸引&#xff0c;从而变成购物狂人&#xff0c;一篇吸引人的种草文案真的让人无法抗拒&#xff0c;会让用户有逛下去的欲望&#xff0c;潜移默化影响用户心智&#xff0c;从而被种草某个产品&#xff0c;这样的种草文案到…

2024年CES展会都有些啥?亮点集锦都在这里

&#x1f4a1; 大家好&#xff0c;我是可夫小子&#xff0c;《小白玩转ChatGPT》专栏作者&#xff0c;关注AIGC、读书和自媒体。 CES在科技界是一场盛会&#xff0c;被誉为科技界的春晚&#xff0c;展会上前沿的技术、概念的产品吸引不少关注。2024年CES是在2023年大语言模型…

团结引擎 | 微信小程序开发

团结引擎 | 微信小程序开发 不会?不懂?看教程咯。以下是官方教程以及示例教程。 官方提供链接: 团结引擎&微信&Github: Unity微信小游戏开发 | Unity 中文课堂 (u3d.cn)https://learn.u3d.cn/tutorial/instant-game-joker?chapterId=64f5997f41598600215eb687#

屏幕截图编辑工具Snagit中文

Snagit是一款优秀的屏幕、文本和视频捕获与转换程序。它能够捕获屏幕、窗口、客户区窗口、最后一个激活的窗口或用鼠标定义的区域&#xff0c;并支持BMP、PCX、TIF、GIF或JPEG格式的保存。Snagit还具有自动缩放、颜色减少、单色转换、抖动等功能&#xff0c;并能将捕获的图像转…