vue项目创建（git-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/cli@3.10.2 //下面这个是安装指定版本，如果没有指定版本则默认下载最新版
    //查看是否安装成功
        >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功能>将以下服务全部打开

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