vue环境搭建以及使用vue-cli创建项目

news/2024/7/10 3:04:31 标签: Vue, Vue环境搭建, Vue-CLI

我要跑vue项目,所以我要搞vue。

1、环境搭建

进入node官网下载对应版本的node,一步步安装即可。

在这里插入图片描述

安装会自动配置路径和npm包管理环境,通过node -v进行验证

在这里插入图片描述

设置npm的镜像源,使用国内的加快速度

# 设置
npm config set registry https://registry.npm.taobao.org
# 验证
npm config get registry

2、安装vue-cli脚手架

Vue CLI文档:https://cli.vuejs.org/zh/guide/

# 卸载旧版本
npm uninstall vue-cli -g
# 指定地址安装,加快速度
npm install -g @vue/cli --registry=https://registry.npm.taobao.org

在这里插入图片描述

安装完成后,进行验证

vue
vue --version

在这里插入图片描述

完成上面的步骤后,我们就可以使用vue-cli新建项目。

3、使用vue-cli新建项目

3.1 图形化界面创建项目

使用vue ui命令,会打开一个网页

C:\Users\lxp>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

在这里插入图片描述

按提示走应该就可以了,下面试试命令行创建。

3.2 命令行创建项目

运行以下命令来创建一个新项目:

vue create 项目名

首先进入某个特定文件夹,输入创建命令,注意项目名不能包含大写字母

在这里插入图片描述

命令输入正确的情况下, 会让你选择创建vue-2还是vue-3的项目,根据需要选择,然后等待项目创建成功

在这里插入图片描述

生成的项目结构如下

在这里插入图片描述

根据它的提示启动项目

cd vue-test
# 等同于npm run dev
npm run serve

在这里插入图片描述

访问即可
在这里插入图片描述

一般我们在创建项目的时候会手动选择配置

请添加图片描述
space键选择自定义的配置

请添加图片描述
(1)enter键继续,选择vue的版本
请添加图片描述
(2)选择是否使用路由 history router

Y选择使用history,但需要对后端配置;n选择的是hash,即地址栏URL中的 # 符号,它会在url中加一个#,比如:http://localhost:8080/#/Global,这里我选择n

请添加图片描述
(3)选择css 的预处理器

node-sass是实时自动编译的,dart-sass需要保存后才会编译,我选 Sass/SCSS (with dart-sass)

请添加图片描述
(4)选择 ESLint 代码校验规则

会提供一个插件化的javascript代码检测工具,ESLint + Prettier 是使用较多的

(5)选择什么时候进行代码校验

Lint on save 保存就检查,Lint and fix on commit 是当 fix 或 commit 时检查,我选择Lint on save

请添加图片描述
(6)选择如何存放配置

  • In dedicated config files 存放到config独立文件中
  • In package.json 存放到 package.json 中

这里选择In package.json
请添加图片描述
(7)是否保存当前的配置

N 不记录,如果选择 Y 需要输入保存名字,我选择N不记录

请添加图片描述
(8)等待项目创建

请添加图片描述


http://www.niftyadmin.cn/n/1236111.html

相关文章

Scala 常用Sort排序

Scala 使用过程中经常要要用到排序模块,自带的方法有sorted,sortBy,sortWith,同时也提供了接口和类,例如Ordering,Ordered,Comparable,Comparator等,下面就盘一下他们的基…

链表操作程序(完整)C语言

#include<stdio.h>#include<stdlib.h>#include<conio.h>/*定义结构体*/struct student{int num;float score;struct student *next;};/*创建一个只有头结点的空链表*/struct student *create_head(){struct student *head;head(struct student*)malloc(sizeo…

Kafka produce flush 引起的性能分析

调用kafka producer发送数据时&#xff0c;发现延迟级别在10-200ms不等&#xff0c;与正常的kafka写入速度不匹配&#xff0c;于是开始找问题~ 一.场景&#xff1a; 一批数据&#xff0c;需要遍历每个数据并发送数据细节的信息到kafka&#xff0c;下面是我原始代码&#xff0c…

SpringCloud入门及创建分布式项目

1、了解微服务 1.1 什么是微服务 微服务是一种架构风格一个应用拆分为一组小型服务每个服务运行在自己的进程内&#xff0c;也就是可独立部署和升级服务之间使用轻量级HTTP交互服务围绕业务功能拆分可以由全自动部署机制独立部署去中心化&#xff0c;服务自治。服务可以使用不…

恢复和删除桌面快捷方式图标箭头

方法一:注册表删除和恢复 一、删除方法 1.运行注册表编辑器(regedit)&#xff0c;打开hkey_classes_root\lnkfile分支。 2.在lnkfile子键下面找到一个名为“isshortcut”的键值&#xff0c;它表示在桌面的.lnk快捷方式图标上将出现一个小箭头。右键单击“issh…

TensorFlow-Keras 1.Train And Evaluate - Demo

TensorFLow Kears 使用 Train 以及 Evaluate&#xff0c;以下代码基于tensorflow 2.0 版本&#xff0c;Conda 3.7环境。 Tips: 需要提前导入的类 import numpy as np import tensorflow as tf from tensorflow import keras from tensorflow.keras import layers 一.初始化m…

Keil中,各种存储模式的区别

1、存储类型data&#xff1a;直接访问内部数据存储器&#xff08;128字节片内RAM&#xff09;&#xff0c;访问速度最快。bdata&#xff1a;可位寻址内部数据存储器&#xff08;16字节片内RAM&#xff09;&#xff0c;允许位于字节混合访问。idata&#xff1a;间接访问内部数据…

怎么设置KEIL的编译模式

“Keil Cx51编译器提供三条编译模式控制命令&#xff1a;SMALL,COMPACT,LARGE&#xff0c;它们对变量存储器空间的影响如下。SMALL&#xff1a;所有变量都被定义在8051单片机的片内RAM中&#xff0c;对这种变量的访问速度最快。另外&#xff0c;堆栈也必须位于片内RAM中&#x…