Vue环境搭建并创建项目(内含搭建过程中大部分错误的解决办法，亲测有效！！)

目录

一.环境搭建

1.安装编辑器VSCode(Visual Studio Code)

1.1添加扩展

1.2安装调试工具

2.安装Git

3.安装nodejs

4.安装webpack,webpack-cli,vue-cli工具

二.创建vue项目

总结： 

---

一.环境搭建

        1.安装编辑器VSCode(Visual Studio Code)

           俗话说的好，“工欲善其事，必先利其器”，学习也是如此，一个更“称手”的“武器”可以我们便于编写代码，接下来开始介绍较为普遍使用的vscode编辑器的安装（也可以使用其他编辑器）：

           首先进入Visual Studio Code官网进行下载：Visual Studio Code - Code Editing. Redefined

          

        进入官网之后（如上图所示），Windows系统直接点击红圈内的进行下载，如果是Linux系统或者Mac系统的点击黄色小圈按钮（根据自己电脑的系统进行选择)：

           

 如果出现红圈的部分说明下载成功，如果没有下载提示，就可以尝试点击黄色小圈部分的链接~

下载成功的文件如下图所示：

          

注：下载速度可能会比较慢，可以选择安装包直接安装：

百度网盘链接：https://pan.baidu.com/s/1fKzdurK8gb0omgWYEWX0zQ?pwd=d2d3  提取码：d2d3

双击VSCodeUserSetUp-x64-1.69.2.exe进行安装

以下是安装步骤：

 

                                                                        

 

 

点击完成之后就安装成功了,并自动进入vscode编辑器，如下图所示：

                1.1添加扩展

                        成功安装VSCode之后，可以安装一些插件（不是必需的，这里是建议安装）：

                                1.1.1 中文扩展

                                一般首次安装是英文界面，可以点击左边第五个按钮添加扩展：搜索Chinese，在右边界面会有安装按钮，点击即可下载：

1.1.2浏览器查看：

下面的插件是用于编写vue.js文件的时候,通过浏览器查看效果：

 

 

下面的Vetur插件可以使Vue代码高亮显示：

 

 

                1.2安装调试工具

                                vue-devtools在这里~vue-devtools是专门用于调试vue项目的调试工具 （ vue-devtools在这里~）

                                打开谷歌浏览器（其他的浏览器也可以，每个浏览器都有对应的扩展程序模块），点击类似拼图的小图标（扩展程序，下面小红圈标记的地方），并打开开发者模式：

 

然后将调试工具的文件夹拖放到扩展程序中，结果如下图所示表示成功：

 

 

2.安装Git

进入浏览器搜索Git并进入Git官网：Git

这里根据自己所需选择安装包:

 

 下载完成后选择对应的.exe文件，并进行安装:

注：如果下载速度慢，可以直接使用安装包（Git安装包在这里~）

 

 

一直next就完事~

 

 

 

                                                                             

检查是否安装成功？

        在桌面或者某文件夹右击，出现Git GUI Here和Git Bash Here或者点击电脑“开始”按钮（win），结果如上图所示，即表示安装成功。

        注意：如果右击桌面或文件夹没有相应的图标显示，首先点击（电脑“开始”）按钮，查看是否有Git文件夹，如果有，那就重启电脑即可。

        （重启真的很好使！！！，但是不要频繁重启）

        （对于创建vue项目，git不是必须的，但它很有用，在文章最后会讲到~）

 3.安装nodejs

进入nodejs官网：下载 | Node.js 中文网,如下图所示：       

选择对应的文件进行安装：（ nodejs安装包在这里~） 

                                                                        

 以下是安装步骤界面截图：

 

 

 

 

                                                                              

 

Win+R->输入cmd->回车打开命令提示符窗口:

输入node  -v，如果打印出了类似于上图的版本号，即表示安装成功

但是如果在vscode的终端输入“node -v”可能会出现以下情况：

解决办法：以管理员方式运行

 

4.安装webpack,webpack-cli,vue-cli工具

                npm包管理工具（不需要单独安装，下载了node就有npm,npm是npde.js内置的一套包管理工具）

                为了提高下载速度，可以使用命令：

//设置淘宝镜像，提高下载速度
npm config set registry https://registry.npm.taobao.org
//有关npm的相关命令，作为拓展~
npm install 包名 -g 安装某个包（必须在线安装，网络）
npm unistall 包名 -g 卸载
npm run build 构建项目

                在vscode终端中（也可以在命令提示符窗口【win+R输入cmd】中或Git Bash中）执行以下命令：

//安装webpack
npm install webpack -g //-g表示全局安装
//安装webpack-cli
npm install webpack-cli -g 
//检查是否安装成功
webpack -v //打印webpack和webpack-cli版本
//下载最新版本的vue-cli（建议使用）
npm i -g @vue/cli
//vue -v,vue-cli -v,vue --version都是不行的！！！一定是vue -V！！！大写的V！！！
//检查vue-cli是否安装成功，成功之后会打印版本号
vue -V   

//温馨提示:
//下面两条也可以安装2.9.6版本的vue-cli（但不建议使用，下面会说明原因）
npm install vue-cli@版本号 -g

npm install --global vue-cli

//如果已经安装了2.9.6版本的vue-cli可以通过以下命令卸载vue-cli重装
npm uninstall vue-cli -g

在vscode终端中安装工具可能会出现一些问题（一般会在初次安装vscode的电脑中出现以下问题）：

其中在安装webpack-cli工具时可能出现了上图类似错误，解决办法：

需要执行以下命令即可安装成功(上图是演示)：

//首先验证权限
get-ExecutionPolicy  //如果结果为Restricted

//输入以下命令进行修改
set-ExecutionPolicy RemoteSigned

https://cloud.tencent.com/developer/article/1746884

对于为什么要这样做，其中的道理在该链接中有所阐述 

然后开始安装vue-cli脚手架:

npm install vue-cli@版本号 -g

npm install --global vue-cli

上面的命令都可以安装vue-cli,但不建议这样做，因为上面的命令安装的一般是2.9.6版本的，对于刚入门的一些操作是没有影响的，但是后期涉及到vue ui组件管理器时，vue ui命令会出现无反应，因为vue ui命令是vue 3.x版本以上才支持 ，如果安装2.9.6版本的vue-cli，还需要执行一下命令进行重装：

//卸载vue-cli
npm uninstall vue-cli -g
//安装最新版本的vue-cli
npm i -g @vue/cli

（升级或者更新vue-cli比较麻烦，最好就是重装，卸载掉重新安装为最好）

所以为了以后能够方便进行更深入的学习，最好安装3.x以上版本的vue-cli：（以下截图是重装vue-cli部分截图~） 

小扩展（vue ui长什么样？）： 

 

  

vue -V 查看脚手架版本 是否安装成功

（vue -v,vue-cli -v,vue --version都是不行的！！！一定是vue -V！！！）

不然就会出现以下错误：

二.创建vue项目

使用以下命令进行vue项目的创建：

1. vue init webpack 项目名称(例如：vue init webpack demo)
2. cd demo（注意路径，要进入到你创建的项目目录中去，不然无法成功运行！！！)
3. npm run dev 运行项目

初始化项目时可能存在以上问题，按照提示执行以下代码即可：

npm i -g @vue/cli-init 

//然后开始初始化vue项目
vue init webpack 项目名称  //例如vue init webpack demo

接下来就正式进入初始化项目了(输入初始化命令之后会让你做很多选择,一般回车即可，如下图)： 

注意：ESLint最好不要选择Yes ，简单点说就是ESLint一个关于代码格式的工具，如果代码有一点不规范，多了一个空格都会报错，导致项目运行不出来

所以最好建议不要使用，选择“no”(图中使用了yes，是为了做示范) 

        那么如果ESLint选择了yes可能会出现什么问题呢？

                对首次运行项目没有影响，但是如果对项目代码进行改动时，格式不规范运行时可能出现以下情况：

                                  

                                   但是没有关系，还是有解决办法的，请看下图：

                                 

                                  将true改为false之后，就可以成功运行了~

                                  

                                （可以看到上图91行msg前面有空格，格式是不标准的，但是改完之后可以成功运行了）

                                （虽然这样可以解决代码格式的问题，但在编写代码时最好按照标准的格式来~）

都选择完之后就开始初始化vue项目了，界面如下图所示就表示项目已经创建成功了：

 

然后根据提示输入以下代码就可以成功运行初始化的项目了，如下图所示：

//进入到创建的项目的目录下
cd demo
//运行项目
npm run dev

项目运行成功之后如图所示

然后将终端中的链接复制到浏览器（或者ctrl+鼠标左键直接打开）就可以看到初始化项目的界面了~ 

打开链接“http://localhost:8080”,如下图所示：

 

总结： 

接下来想讲讲关于执行npm命令的一些问题：

首先最重要的就是：当npm命令在某个终端无法运行时，一定一定要首先使用管理员方式运行！！！用管理员方式运行和不用管理员方式运行，有的时候区别是很大的！！！（下图是举例如何以管理员方式运行命令提示符）

浅浅地分享以下我搭建vue项目的经历：

基本情况：在git里面运行npm命令报错，并且vscode终端运行也报错（npm error）,但是当我以管理员身份在命令提示符窗口中却可以成功运行。

                  后来试了试以管理员方式运行git，也不行，至今还没想明白是什么原因.......

                  vscode当时是以管理员方式运行的，但是也报错，就使用set命令修改了权限.....就挺离谱

所以第一：以管理员方式运行很重要！！！第二：不要死磕在一个终端上，如果vscode终端不好使，就试试命令提示符窗口，这还不好使，就试试Git Bash,Git Bash终端很好使！！！，在有些情况下，vscode终端和命令提示符都不能运行出你想要的结果，但是以管理员方式打开Git Bash，在该窗口中就能够成功运行......第三：重启能解决很多问题。如果你很确信你确实是安装成功了相关工具（比如nodejs），但是无法打印版本号，那就关掉终端，重新启动相关终端。如果还是不行，就重启电脑！！！（但是不要过于频繁的重启电脑，谨慎使用~）

第一次写这么长的博客，有很多不足的地方，如果有不懂的可以评论或者私信~

有写的不对的地方请各位大佬批评指正