[鼠年全马] W24 – Vue心得笔记 – 让Vue Cli小秘书跟你一起做

熊掌联运广告联盟 最新域名优惠/VPS优惠/免备案CDN活动

最近看到了一个广告让我很心动~
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图1

iT邦第12届铁人赛要开始拉~~~
好兴奋阿!!
我应该会报名吧~不过还没想好主题就是了~[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图2

请各位多多指教啰[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图3


接着进入今天的正题~
今天要来介绍一个很好用的工具 – Vue Cli

#Vue Cli是什么?

[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图4
截自Vue Cli-介绍

特色如下:

  • 基于webpack所建置的开发工具
  • 能够以非常迅速的方式去设置各种配置
  • 以及快速的引用各种套件
  • 可快速开发SPA(single-page application)网页

简而言之, Vue Cli呢 就像一个小秘书, 什么都帮你川扁扁, 让老闆躺着领钱(误), 让开发人员可以偷懒的好工具, 不论新手老手都爱用的神物[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图2


接着就开始从零开始到建立一个Vue Cli专案吧~

#安装

要用小秘书之前一定得先将它安置好, 并且给它一个它喜欢的环境, 用起来才会舒服
来看看官网安装说明
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图6
发现它需要依赖Node.js8.9或更高版本, 所以还没装的先去装好再继续 ->Node.js传送门

接着要带它进来我家搂~

//输入以下指令就会自动安装
npm install -g @vue/cli

安装完毕可以来看看这个小秘书是不是最幼齿的

vue --version

确认后就可以开始来用它啰~[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图7


#建立一个新专案

接下来我们来让小秘书帮我们做点事~建立一个Vue Cli专案~

vue create hellovuecli

下完指令后, 它会问一些问题后, 会根据我们的答案来设置这个专案

第一个会碰到的问题, 是否要使用预设的设置来建立专案:
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图8
预设的部分包含babeleslint套件, 其他的就没有了
这边选第二个, 让我们自订看要安装什么套件吧~

接着遇到第二个问题, 要安装哪些套件:
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图9

  • (O)babel: 可以把ES6语法编译为ES5
  • (O)Router: Vue-Router套件, 用于切换页面
  • (X)Vuex: 用于集中管理vue元件的资料状态, 在大型专案上非常好用
  • (X)Linter / Formatter: 协助检查程序码是否正确的工具, 常用在让不同写法的开发人员统一规范他们的写法(注: 此工具六角老师建议新手不要安装, 以免遭受打击[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图2)

至于其他的呢 个人目前还没有遇到会用到它们的地方, 对于初期开发来说, 上面四个套件已足够
不过我们目前先不用装VuexLinter / Formatter, 杀鸡焉用牛刀, 简单的专案不需要它们出马

选好之后就继续下一步啰~

接着第三个问题, vue-router是否要使用history模式(Y/N):
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图11
回答N的话他会设置另一种hash模式
两种最直观的差异就是在url后方是否有个 *#*符号
其他的差异这里不深入研究, 有机会专门写一篇Vue-Router时再来探讨它

再来第四个问题, 刚才选择要安装的套件, 要将它们的配置放在哪里:
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图12
第一个是让他们有各自专用的设置档
第二个是在package.json集中管理
这边我们选第二个

最后一个问题, 要不要储存这些设置, 之后建立专案时可以快速使用:
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图13
这里见仁见智, 我通常会回答N, 因为每一次的专案会用到的可能都不一样…

再来就等小秘书做完事啰~
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图14

完成后就可以看到我们资料夹里已经建置好一个完整的专案了
专案架构像这样
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图15

再来可以试跑看看是不是真的可以用

npm run serve

看到这个页面就是成功啰!!![鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图7
[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图17


今天和小秘书一起做 出一个Vue Cli专案篇就到这~
专案架构的部分这次没讲到, 之后在实作篇会再详细的写清楚!![鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-图18

  ↓ 整篇精华在这
PS. 今天3倍卷预购最后一天, 大家别忘了去预购喔~ 传送门
  ↑ 整篇精华在这

推荐:
[鼠年全马] W22 - Vue心得笔记 - Vue实例的组成

来到了连假Day3~ 今天要写一个Vue实例的组成 一样是很无聊却又非常重要的观念篇~ 撑住就是你的!!   --某个老师跟我讲的 #Vue实例的组成 基本一个Vue实例会包含以下, 但不是一定会需要…

[鼠年全马] W21 - Vue心得笔记 - 指令篇(后)

Hi, there 端午连假每日一篇Day2来啰~ 昨天提到的指令都是基础的喔~闭着眼睛都要知道怎么写的那种!! 忘记的赶快回去复习-[鼠年全马] W20 - Vue心得笔记 - 指令篇(前) 再来接…

[鼠年全马] W20 - Vue心得笔记 - 指令篇(前)

最近被上级塞了一堆很赶的专案, 上礼拜就算硬挤也挤不出时间... 只好这礼拜趁连假来补稿, 充实一下连假的生活, 来个端午连假每日一篇计画 #Vue指令 趁天气好, 脑袋清晰的时候, 赶紧来把基本观念…