如何搭建Vue脚手架

 1.什么是脚手架

      对于新手来说，就是通过一套命令下来，快捷的创建好vue项目的目录结构，直接在改目录结构下进行后续的开发（小编这句话也是在网上查看到的，然后觉得这句话便于理解）

2.如何而搭建脚手架

          第一步：   打开CMD   如果在CMD操作不了一下操作   可以打开node.js里面有

                                              

                                                              =====》

                                                  把这个打开这个使用

          第二步 ：  安装Node.js(这里就不介绍了)       如果安装了可以检查一下版本号   指令是=》node -v

          第三步：   安装vue-cli  （脚手架）     

                         指令是===》npm install -g vue-cli

                              安装的时候会有点慢 属于正常现象   如果长期卡着不动的话可以ctrl+c取消

                          【  如果实在嫌慢的话就可以使用淘宝的cnpm镜像来安装（小编在这里没有使用淘宝镜像所以就不和大家演示了）】 

           第四步：  安装是否成功  可以用 vue -V（这里的V一定要大写）这个指令来查看 

                 

                             如果你的电脑这样显示的话  就是安装成功了

                           到这里你的脚手架就安装成功了

             第五步：如果你想卸载 重新安装的话   

                                  全局卸载vue-cli指令： npm uninstall vue-cli -g

2.如何搭建一个项目

              第一步 ：在D盘中创建一个文件夹存放创建的项目（小编习惯性把文件放在D盘）小编取名为 demoa

              第二步 ：创建一个项目（回到Node.js command）     指令是==》  vue init  webpack  项目名称

                                          

               第三步：回答他的问题

                               a.      项目的名字  （可以直接按回车也可以自己定义名字）（小编在这里就直接回车了）

                                b.  描述项目   （可以直接回车 ，或者自行描述）（小编在这里就直接回车了）

                                c.    作者的名字（自行定义）

                              d.接下来会让用户选择Runtime + Compiler: recommended for most users    运行加编译，既然已经说了推荐，就选它b了

                                  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere  仅运行时，已经有推荐了就选择第一个了

                                          (小编直接选择了第一个)

                              e.

                          Install vue-router? (Y/n)    是否安装vue-router，这是官方的路由，大多数情况下都使用，

                           vue-router官网 。这里就输入“y”后回车即可

                           f.

                          是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，输入'n'后回车，一般项目中都会使用。

                            g.是否安装单元测试    (小编在这里选择了安装)

                            h.选择一个测试转轮（使用箭头键）

                                     （小编选择第二个）

                           i.是否安装e2e测试 

                                      (小编选择安装)

                            j.  

                                                （小编选择的第一个）

 

                            接下来：    就在创建中  等待即可

 

                                 安装完后会出现：

                                           

 

3.如何查看项目

           第一步：查看之前创建的文件夹（小编是在D盘创建的demoa）

                            打开后就有一个这个文件

              打开这个test这个文件   里面的文件有这些（这就是搭建的所有项目）

  第二步：在命令中打开项目

           

        按照他提供的命令来操作

     

      接下来就在运行

      第三步：这是上一步产生的结果   

       直接将后面的链接在浏览器中打开： http://localhost:8080（小编运行的就是这个）

                     用浏览器运行查看的页面效果：

                 

 

 

    会出现链接打不开的情况出现（小编之前出现过）    可以检查两个地方

                      1.检查端口号是否占用，直接更改端口号，端口号如何更改，步骤如下：

                                         test项目===》

                                       config文件打开==》

                                       inde.js文件打来 用你自己的编译器==》

                                       找到这一段   

  // 各种设备设置信息 host: 'localhost',

//主机名 port: 8080, // 端口号（默认8080）

autoOpenBrowser: false,//是否自动打开浏览器 //想让浏览器自动打开，只需将false改为true即可，为防止端口号冲突，这里也可以随意更改端口号

   ===》

                                                             这个就是端口号  你可以直接更改，更改后保存 再用命令重新运用  生成的链接                                                             在用浏览器打开  如果还不行====》

                                                           再打开index.js查看这个  将这个的值改为true试一试（如果还不行小编也无能为力了！！！ ）