❤ Vue2+vue-cli+vue-router+vuex +elementUI/vant完整项目搭建 项目和配置(一)

news2024/11/16 7:24:13

Vue2+vue-cli+vue-router+vuex +elementUI/vant项目搭建和配置webpack(一)

项目整套:Vue2+vue-cli+vue-router+vuex +elementUI/vant

1、环境检测:

node 环境 git --version

git 环境 git --version

npm 环境 npm -v

查看VUE脚手架版本 vue -V

在这里插入图片描述

2、vue2环境补全

安装Vue.js

安装Vue脚手架

npm install vue -g   (或:cnpm install vue -g)
npm install vue-cli -g
或者
npm install @vue/cli –g
或者 
npm install -g @vue/cli@版本号 vue@版本号 

验证vue安装是否成功

npm list vue
npm list vue -g

安装webpack

-g //全局安装
-D //局部安装
npm install --save-dev webpack -g
或者
npm install webpack -g
npm install webpack webpack-cli webpack-dev-server -g(建议)

检查安装

npm webpack -v 
或者
webpack -v

利用webpack创建基于Webpack的Vue.js项目

mkdir spefevue 创建一个空的文件夹
cd spefevue 进入文件夹 
npm init -y (或者npm init也可以)--正常初始化环境


建议使用webpack---webpack初始化环境 (此处报错1 )

vue init webpack 项目名称 
//vue-cli2 脚手架初始化 `vuecli3之前的创建命令` 

不成功的话请错误1,安装@vue/cli-init

npm install @vue/cli-init -g

npm i webpack@3.6.0 --save-dev

在这里插入图片描述

配置路由 router.js
配置路由拦截器 main.js 引入permission.js拦截器
配置 nprogress 浏览器上面加载进度条
配置 axios 请求

错误

(1)Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80,

在这里插入图片描述

Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80,网上查了很久也没有什么好的解决方法,有人说 hosts 问题 ,我把 hosts 删除了也不行,有人说镜像问题,把镜像设置成淘宝的也不行。最易解决的方法就是在终端输入 npm config set http-proxy null

npm config set http-proxy null

结果: 方法为生效

方式:
安装桥接工具 @vue/cli-int
因为Vue-cli 3.x和vue-cli 2.x使用了相同的 vue 命令,所以 vue-cli 2.x 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具 ——@vue/cli-init

vue cli3之前的创建命令 是 vue init webpack 项目名称
3+ 以后需要单独安装 @vue/cli-init

npm install @vue/cli-init -g

(2) A system error occurred: uv_os_gethostname returned ENOSYS (function not implemented)

at new Defaults (C:\Users\xx\AppData\Roaming\nvm\v16.14.0\node_modules\@vue\cli\node_modules\@achrinza\node-ipc\entities\Defaults.js:26:20)

在这里插入图片描述
对应文件:

C:\Users\xx\AppData\Roaming\nvm\v16.14.0\node_modules@vue\cli\node_modules@achrinza\node-ipc\entities

在这里插入图片描述
添加 localhost

os.hostname=()=>"localhost"

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

响应式编程实战(02)-响应式编程的适用场景

0 知识前提 已掌握响应式编程中的核心概念:响应式流、背压机制以及响应式流规范。 1 引言 响应式编程能够应用到那些具体的场景呢? 目前有哪些框架中使用到了这一新型的技术体系呢? 2 响应式编程的应用场景分析 可以认为响应式编程并不仅仅是一种编程技术&a…

OpenPCDet系列 | 8.1 nuScenes数据集的处理流程与gt_sample的database构建

1. nuScenes Dataloader 对nuScenes数据集处理的了解,大体上的核心还是getitem函数、prepare_data函数,以及collate_batch函数三个部分的处理。其中prepare_data函数和collate_batch函数是在Dataset这个父类实现的,基本的处理流程基本不变&a…

《Redis 核心技术与实战》课程学习笔记(六)

哨兵集群 哨兵机制的基本流程 在 Redis 主从集群中,哨兵机制是实现主从库自动切换的关键机制。 哨兵其实就是一个运行在特殊模式下的 Redis 进程,主从库实例运行的同时,它也在运行。哨兵主要负责的就是三个任务:监控、选主&…

三种SQL实现聚合字段合并(presto、hive、mysql)

需求:按照项目名,以逗号合并参与人 presto select item_name,array_join(array_agg(name),,) as group_name from test.test_04 group by item_name order by item_name hive select item_name,concat_ws(,,collect_set(name)) as group_name from tes…

全志V3S嵌入式驱动开发(四种启动方式)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 对于v3s的启动方式分析,怎么研究都不为过。对我们整个系列文章比较熟悉的同学来说,这幅图真的是太熟悉了, 整个流程不复杂。它主要是告诉我们,v3s加载的顺序是怎么样的…

【Linux后端服务器开发】进程控制与替换

目录 一、进程控制 1. 进程退出 2. 进程等待 2.1 阻塞等待 2.2 status位图结构 2.3 非阻塞等待 二、进程替换 1. exec*系列函数 2. 进程替换高级语言可执行程序 一、进程控制 1. 进程退出 进程退出会进入僵尸态,把自己的退出结果写入到自己的task_struct…

一种使得大模型输出结构化数据的简易方法

最近在用大模型跑一些数据,于是就不可避免的遇到了如何让大模型输出的格式便于处理这个问题。经过一些研究发现了一套比较有用的方法,在这里总结一下。 背景 任务是这样的,我需要用大模型(比如ChatGPT,ChatGLM等等&a…

Springboot启用HTTP响应压缩

官方文档:https://docs.spring.io/spring-boot/docs/2.3.12.RELEASE/reference/htmlsingle/#how-to-enable-http-response-compression

Java面试题大全(2023牛客网最新版)大厂面试题附答案详解

很多 Java 工程师的技术不错,但是一面试就头疼,10 次面试 9 次都是被刷,过的那次还是去了家不知名的小公司。 问题就在于:面试有技巧,而你不会把自己的能力表达给面试官。 应届生:你该如何准备简历&#…

解决mysql的count()函数条件表达式不生效的问题

示例 表数据 统计错误的sql select count(age 10) as count from student查询结果 原因 count(‘任意内容’)都会统计出所有记录数,因为count只有在遇见null时才不计数,即count(null)0 解决 方法1:count()函数中条件表达式加上or n…

1、计算机网络核心

序号地址1计算机网络核心2数据库相关3Redis4Linux相关5JVM的内容6GC相关的7Java多线程与并发8Java多线程与并发-原理9Java常用类库与技巧10Java框架-Spring 文章目录 1、OSI开放式互联参考模型2、TCP/IP3、TCP报文头4、TCP的三次握手5、TCP的四次挥手6、为什么会有TIME_WAIT状态…

【unity】燧光MR设备极简教程(使用篇)

燧光MR设备极简教程(使用篇) 一、硬件的基础使用二、定位信标三、投屏直播1、第三人称视角同步MR2、第一人称视角无线投屏 相关文章:燧光MR设备极简教程(开发篇) 一、硬件的基础使用 官方使用文档:https:…

【LLM】Prompt tuning大模型微调实战

文章目录 一、Propmt tuning1. peft库中的tuning2. prompt tuning怎么搞 二、Prompt tuning代码实战1. tuning训练2. 模型推理比较3. 其他tuning技术 Reference 一、Propmt tuning 1. peft库中的tuning 之前提到过可以借助peft库(Parameter-Efficient Fine-Tuning…

基于MeanShift的图像滤波方法

前言 在视觉领域中,图像滤波是一种常用的技术,用于去除图像中的噪声和平滑图像。其中,MeanShift滤波是一种基于颜色和空间信息的非参数化滤波算法。 MeanShift滤波原理 MeanShift滤波是一种基于密度估计的非参数化滤波技术,它对每…

【Go】Go 语言教程--GO语言数组(十一)

往期回顾: Go 语言教程–介绍(一)Go 语言教程–语言结构(二)Go 语言教程–语言结构(三)Go 语言教程–数据类型(四)Go 语言教程–语言变量(五)Go …

希尔排序及其时间复杂度(图文详解)

😾 博客主页: 爱吃bug的猿 🚀博客专栏: 数据结构,C语言初阶进阶全流程讲解 😽😽😽如果喜欢博主的文章,可以给博主点波赞和关注加速博主更新 文章目录 前言1. 代码思路代码实现法1代码实现法2(不…

【KingbaseES】数据库如何查询数据库,模式及表大小

新建数据kingbase及kingbase模式 CREATE DATABASE kingbase OWNER kingbase; CREATE SCHEMA kingbase AUTHORIZATION "kingbase";在数据库kingbase的kingbase模式下新建两张测试表test_size,test_size1并插入数据 CREATE TABLE "kingbase"."test_sz…

课时9:PKI证书基础知识

快速链接: . 👉👉👉 个人博客笔记导读目录(全部) 👈👈👈 付费专栏-付费课程 【购买须知】:Secureboot从入门到精通-[目录] 👈👈👈目录 1、CA证书的一般用法2、x509证书3、openssl证书命令行4、X509v3证书格式

第十五章 原理篇:YOLOv8

找工作也太难了吧根本找不到工作我哭死。 参考教程: https://mmyolo.readthedocs.io/en/latest/recommended_topics/algorithm_descriptions/yolov8_description.html https://zhuanlan.zhihu.com/p/599761847【这个写的挺不错】 https://zhuanlan.zhihu.com/p/63…

Linux进程监控及控制【命令ps的使用】

ps命令详解 Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信息,就可以使用top命令。 要对进程进行监测…