1.什么是脚手架

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

2.如何而搭建脚手架

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

                                              

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格

                                                              =====》

                                             

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_02

     把这个打开这个使用

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

          第三步:   安装vue-cli  (脚手架)     

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

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

 

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

                 

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_03

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

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

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

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

2.如何搭建一个项目

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

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

                                        

vue脚手架如何链接mysql vue如何搭建脚手架_端口号_04

  

第三步:回答他的问题

                               a.

vue脚手架如何链接mysql vue如何搭建脚手架_目录结构_05

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

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_06

  描述项目   (可以直接回车 ,或者自行描述)(小编在这里就直接回车了)                                c.

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_07

    作者的名字(自行定义)

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.

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_08

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

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

f.

vue脚手架如何链接mysql vue如何搭建脚手架_端口号_09

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

  g.

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_10

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

vue脚手架如何链接mysql vue如何搭建脚手架_vue脚手架如何链接mysql_11

选择一个测试转轮(使用箭头键)

                                     (小编选择第二个)

 i.

vue脚手架如何链接mysql vue如何搭建脚手架_目录结构_12

是否安装e2e测试 

                                      (小编选择安装)

j.

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_13

  

                                                (小编选择的第一个)

 

                            接下来:

vue脚手架如何链接mysql vue如何搭建脚手架_端口号_14

    就在创建中  等待即可

 

                                 安装完后会出现:

                                           

vue脚手架如何链接mysql vue如何搭建脚手架_端口号_15

 

3.如何查看项目

           第一步:查看之前创建的文件夹(小编是在D盘创建的demoa)

                         

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_16

   打开后就有一个

vue脚手架如何链接mysql vue如何搭建脚手架_端口号_17

这个文件

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

vue脚手架如何链接mysql vue如何搭建脚手架_vue脚手架如何链接mysql_18

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

       

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_19

    

        按照他提供的命令来操作

     

vue脚手架如何链接mysql vue如何搭建脚手架_目录结构_20

      接下来就在运行

vue脚手架如何链接mysql vue如何搭建脚手架_端口号_21

  第三步:

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_22

这是上一步产生的结果   

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

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

vue脚手架如何链接mysql vue如何搭建脚手架_代码风格_23

                 

 

 

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

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

                                         test项目===》

                                       config文件打开==》

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

                                       找到这一段

vue脚手架如何链接mysql vue如何搭建脚手架_端口号_24

   

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

//主机名 port: 8080, // 端口号(默认8080)

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

   ===》

                                                             

vue脚手架如何链接mysql vue如何搭建脚手架_端口号_25

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

vue脚手架如何链接mysql vue如何搭建脚手架_vue脚手架如何链接mysql_26

将这个的值改为true试一试(如果还不行小编也无能为力了!!! )