1.什么是脚手架
对于新手来说,就是通过一套命令下来,快捷的创建好vue项目的目录结构,直接在改目录结构下进行后续的开发(小编这句话也是在网上查看到的,然后觉得这句话便于理解)
2.如何而搭建脚手架
第一步: 打开CMD 如果在CMD操作不了一下操作 可以打开node.js里面有
=====》
把这个打开这个使用
第二步 : 安装Node.js(这里就不介绍了) 如果安装了可以检查一下版本号 指令是=》node -v
第三步: 安装vue-cli (脚手架)
指令是===》npm install -g vue-cli
安装的时候会有点慢 属于正常现象 如果长期卡着不动的话可以ctrl+c取消
第四步: 安装是否成功 可以用 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试一试(如果还不行小编也无能为力了!!! )