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

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 -gnpm i webpack@3.6.0 --save-dev

在这里插入图片描述

进一步配置:

进一步配置完善已迁移到(二)部分

内容包含

配置路由 router.js
配置路由拦截器 permission.js拦截器
配置 nprogress 浏览器上面加载进度条
配置 axios 请求
配置 element-ui组件库
文章地址:
http://t.csdn.cn/xYiTj

错误

(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"

在这里插入图片描述

Vue2+vue-cli+vue-router+vuex 项目配置(二)
文章地址:
http://t.csdn.cn/xYiTj

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

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

相关文章

【youcans动手学模型】SENet 模型及 PyTorch 实现

欢迎关注『youcans动手学模型』系列 本专栏内容和资源同步到 GitHub/youcans 【youcans动手学模型】SENet 模型 【经典模型】SENet 模型-Cifar10图像分类1. SENet 卷积神经网络模型1.1 模型简介1.2 论文介绍1.3 分析与讨论 2. 在 PyTorch 中定义 SENet 模型类2.1 定义 SE Block…

【leetcode】61. 旋转链表 (python)

题目链接:61.旋转链表 写法一:暴力 class Solution(object):def rotateRight(self, head, k):""":type head: ListNode:type k: int:rtype: ListNode"""# 暴力:每次移动一个,时间复杂度 O(N^2)&am…

Duplicate keys detected: ‘0‘. This may cause an update error.

问题 vue报错 Duplicate keys detected: ‘0‘. This may cause an update error. 原因 <div v-for“(item,id) in items” :key"id”>{{item.name}} </div><div v-for“(item,id) in items” :key"id”>{{item.address}} </div>:key重…

word绘制横向表格

最近写小论文&#xff0c;表格太宽需要绘制横向表格&#xff0c;找了半天教程说的都不是很详细&#xff0c;我学习了一下决定自己写个教程。 我要在一和二之间创建一个横向表格。首先在一后面添加一个分节符号。布局->分隔符->分节负下一页。 再在二之前添加一个分节符号…

音视频技术开发周刊 | 301

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 微软、谷歌、亚马逊&#xff0c;打响大模型时代的云战争 过去数月&#xff0c;云巨头们砸下真金白银&#xff0c;研发大模型、战略投资、自研 AI 芯片……大模型的时代方兴…

springboot服务端接口外网远程调试,并实现HTTP服务监听 - 内网穿透

4.2 请求侦听 在浏览器访问本地4040端口&#xff0c;http://localhost:4040 向服务端发送请求后,此处就会显示相关的请求日志,可以看到请求的方式,请求的数据,接口路径,和返回状态及结果,极大提高了调试效率。 ![20230130105914](https://img-blog.csdnimg.cn/[TOC] 转载自远…

Mysql-------SQL:DDL数据定义语言、DDM数据操作语言、DQL数据库查询语言、DQL数据控制语言

MySQL MySQL是一个关系型数据库管理系统&#xff0c;其数据是保存在不同的数据表中&#xff0c;而不是将所有数据放在一个大仓库内&#xff0c;这样就增加了速度并提高了灵活性 SQL MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言&#xff0c; SQL语言可以分为&am…

gulimall-首页渲染-nginx域名搭建

首页渲染与nginx域名搭建 前言一、首页1.1 整合 thymeleaf1.2 整合 dev-tools1.3 渲染分类数据 二、Nginx 域名搭建2.1 搭建域名访问环境2.2 nginx 配置文件2.3 总结 前言 本文继续记录B站谷粒商城项目视频 P136-140 的内容&#xff0c;做到知识点的梳理和总结的作用。 一、首…

【Redis】—— Redis的AOF持久化机制

&#x1f4a7; 【 R e d i s 】—— R e d i s 的 A O F 持久化机制 \color{#FF1493}{【Redis】 —— Redis的AOF持久化机制} 【Redis】——Redis的AOF持久化机制&#x1f4a7; &#x1f337; 仰望天空&#xff0c;妳我亦是行人.✨ &#x1f984; 个人主页——微风撞…

查看docker运行状态,与查看防火墙运行状态

安装docker这里不细述了&#xff0c;可以通过 docker -version 查看安装的版本&#xff0c;出现成功就表示安装是ok的 查看docker状态是否启动状态&#xff0c;出现running就表示成功 systemctl status docker 如果没有则需要输入启动命令来启动 systemctl start docker 没报错…

Mac下pom.xml文件中找不到env.JAVA_HOME

Mac 11.7.6 这个是解决后的样子&#xff0c;解决前是env.JAVA_HOME找不到 上图中的${env.JAVA_HOME}中的env是用来获取系统环境变量&#xff0c;但是在mac10以上的版本,即使我们在bash_profile文件中配置了JAVA_HOME&#xff0c;这里也不能直接使用env将JAVA_HOME点出来&#…

Linux的软链接与硬链接

Linux的软链接与硬链接 1&#xff0c;创建硬链接&#xff1a;2&#xff0c;创建软链接&#xff1a;3&#xff0c;软链接是什么4&#xff0c;软链接文件的权限5&#xff0c;硬链接是什么6&#xff0c;做个小实验 总结问题&#xff1a;为什么有软链接了&#xff08;快捷方式&…