首页 > 其他分享 >vue项目创建(git-bash版本)

vue项目创建(git-bash版本)

时间:2024-05-27 21:59:37浏览次数:24  
标签:npm node git vue 安装 bash

前言

        1、安装git-bash

        2、安装node.js

        3、npm包管理工具安装

        4、安装webpack工具

        5、安装vue-cli

        6、创建项目

        7、问题报错解决方案


前言       

        笔者由于是第一次写博客,也是第一次进行vue的安装学习,所以有编辑排版错误和学术错误请指出,笔者虚心请教。

        由于网上都有很多vue项目创建流程,但是实际安装过程中可能会出现一些大大小小的问题,所以笔者通过对自己安装的心得尽可能做一个详细一点的安装流程步骤,如有不足,请指出。


1、安装git-bash

         打开浏览器搜索并下载git.bash进行安装,这是一个方便于vue项目创建的命令行程序,一般都将使用命令行的方式进行vue项目的创建,笔者在创建过程中都是采用git-bash进行的

        Windows版本:git-bash for windows 

        mac版本:git-bash for mac

        注意:以下命令都在git-bash中执行


2、去node.js官网下载最新的node.js版本并安装,安装成功后进入git.bash查看node.js是否安装

        node.js官网地址:node.js

语句为 node -v 或者 node -version,正确安装将会显示node.js的版本
    例如:>node -v 
            v16.10.2

3、npm包管理工具的安装,可以使用npm下载包,但是由于下载站点位于国外,所以下载速度慢很多,这里推荐使用国内的淘宝镜像(淘宝镜像非必要)

    //这里是将国外地址改为国内并进行下载
            npm install -g cnpm -registry=https://registry.npm.taobao.org
    //传统的npm安装为
            npm install
    //如果只是更换下载地址
        > npm config set registry https://registry.npm.taobao.org
    //安装完成后可以通过以下语句对npm包进行调整(如果是安装cnpm则将npm都替换成cnpm)
        >npm uninstall //卸载
        >npm install 包名 //安装指定的某个包//包名之后跟-g则表示全局安装,--save则表示本地安装
        >npm update //更新指定的包
   // 检查npm/cnpm是否安装可以使用以下语句
        >npm -v
            //..一大串报告说明安装完成..

4、下载并安装webpack(打包工具)

    //安装指令如下
        >npm install webpack -g
    //检查是否成功安装
        >webpack -V   

5、全局安装vue-cli,vue版本和node.js版本是有必要关系的,主要指的是vue2系列和vue3系列的区别,建议安装最新的,因为新的可以向下兼容旧的

//安装指令如下
        >npm install -g @vue/cli 
        >npm install -g @vue/[email protected] //下面这个是安装指定版本,如果没有指定版本则默认下载最新版
    //查看是否安装成功
        >vue -V 
        //或者
        >vue --version 
    //升级版本语句
        >npm update -g @vue/cli //yarn blobal upgrade --latest@vue/cli
    //卸载语句
        >npm uninstall -g @vue/cli

确保以上所需项都成功安装后则以管理员身份运行git-bash   


6、项目创建

(1)将路径定位到项目创建文件夹下

$ cd c:/Users/86131/Desktop/vue

(2)使用创建语句

$ vue init webpack project //注意命名不要使用大写,极其容易会在项目创建过程中报错

(3)于是便会出现多个项目配置的配置步骤(各个项目配置在往后会分别补充是什么功能,目前都先选择回车,即默认值)

(4)创建好之后会出现可执行语句

                                        注意:此处应该还有一个npm install在cd project后面的

      

           目前为止我们已经算是创建好项目了,如果要查看你的第一个vue项目

                首先

cd 项目名

                然后

npm install

                之后

npm run dev 
//或者是
npm run serve
//取决于你的vue版本

                 然后会返回一个网络端口,将网络端口复制到浏览器中打开       当你看到此界面的时候,说明你的第一个vue项目创建完成,打开vs.code进行项目的学习吧!


7、可能出现的问题及解决方案

        (1)提示npm error

                首先查看淘宝镜像网址有没有出错

npm config get regietry
//如果错误,则更改网址
npm config set registry=https:/registry.npm.taobao.org/

                其次可能是npm下载的位置出错,因为有的人刚创建好项目就直接运行npm install了,所以会出现路径不对npm报错的问题,事实上只要先将目标路径更改成下一级你的项目名称(文件夹)就再运行npm install就可以了。

        (2)运行完npm run dev之后网络端口复制进浏览器出现无法访问的问题

                首先,可以尝试多次启动npm的服务,也就是重启打开再运行该语句,或者多次运行语句(因为这种属于不同电脑的自身对于前端服务启动的问题,情况很多很复杂,只能多次重启服务)

npm run dev

                其次,有很大可能是电脑并没有打开并且允许这种服务(笔者第一次也是这里出了问题)

我们这里以win11为例

                >桌面>控制面板>卸载程序>启动或关闭windows功能>将以下服务全部打开

                之后再次将网络端口输入进浏览器便可以正常打开了

标签:npm,node,git,vue,安装,bash
From: https://blog.csdn.net/2301_79193628/article/details/139180776

相关文章

  • Vue3实战笔记(46)—Vue 3高效开发定制化Dashboard的权威手册
    文章目录前言Dashboard开发总结前言后台管理系统中的Dashboard是一种图形化的信息显示工具,通常用于提供一个特定领域或系统的概况。它可以帮助用户监控和分析数据,快速获取重要信息。可以帮助用户监控业务状况、分析数据、获取关键信息和管理资源。通过合理的设计和......
  • Vue3实战笔记(47)— 一探emit奥秘——组件间通信的艺术与实践
    文章目录前言一、Vue2中的emti二、Vue3的emit总结前言Vue封装了自定义组件之后,如果子组件想要向父组件传递数据该怎么办?Vue.js中的emit方法就是主要用于组件间的通信,特别是父组件与子组件之间的通信机制。它是Vue组件内部触发自定义事件并向父级组件传递数......
  • 基于SpringBoot+Vue+uniapp的IT技术交流和分享平台的详细设计和实现(源码+lw+部署文档
    文章目录前言具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • vue3计算属性
    基础示例模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象:我们想根据author是否已有一些书籍来展示不同的信息:这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白......
  • 升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0 uniapp、vue、android、web 框
    升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0uniapp、vue、android、web框架:Vue3+SpringBoot3),界面功能(一)  升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0uniapp、vue、android、web框架:Vue3+SpringBoot3),界面功能(一) 1.登录与申请试用界......
  • 基于.NET Framework 4.8.1的ASP.NET Web用Gitlab Runner调用MSBuild之后没有bin\rosl
    摘要基于.NETFramework4.8.1的传统ASP.NETWeb程序,使用GitlabRunner自动集成,在发布的网站目录下,没有bin\Roslyn文件夹。这里涉及到容易被忽视的Roslyn编译器的知识点。Roslyn是什么?在我们的ASP.NETWeb项目源代码中有什么体现?1、web.config下有配置节点一般在web.config末......
  • Vue 组件生命周期:探索钩子
    title:Vue组件生命周期:探索钩子date:2024/5/2718:42:38updated:2024/5/2718:42:38categories:前端开发tags:生命周期异步加载通信原理父子通信兄弟通信跨层通信性能优化第1章:介绍与背景1.1什么是Vue组件生命周期?Vue组件生命周期是指Vue组件从......
  • Vue3.4+版本中的 defineModel 宏的用法示例
    关于defineModel,Vue官方给出了较为详细的解释,具体请看文档说明下面是整理出的一个简易示例:子元素代码://Comp.vue<scriptsetup>constmsg=defineModel('msg',{type:String,default:''});constscore=defineModel('score',{type:Number,default:0})......
  • 【vue】dom元素拖拽指令
    directives.js:/***v-dialogDrag弹窗拖拽*@paramsoperate{String}拖拽项的data-drag-name*@paramsmove*/constdialogDrag={//el,binding,vnode,oldVnodeinserted(el,binding,vnode){const{operate,move}=binding.value;if(t......
  • vue2+uni-app的实现的动态数据显示
     1:所用技术:Vue2.X,Uview2.0,确保项目上已经安装了Vue2.X 版本和组件Uview(注:其余组件:如ElementUI组件也适用,主要是样式的区别)2:template层<template> <viewclass="NavPage"> <viewclass="LoginCard"> <uni-cardis-shadow:trueclass="CardLogin"......