[鼠年全马] W24 - Vue心得笔记 - 让Vue Cli小秘书跟你一起做-58码农网

最近看到了一个广告让我很心动~

iT邦第12届铁人赛要开始拉~~~
好兴奋阿!!
我应该会报名吧~不过还没想好主题就是了~

请各位多多指教啰

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

#Vue Cli是什么?

截自Vue Cli-介绍

特色如下:

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

简而言之, Vue Cli呢就像一个小秘书, 什么都帮你川扁扁, ~~让老闆躺着领钱(误)~~, 让开发人员可以偷懒的好工具, 不论新手老手都爱用的神物

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

#安装

要用小秘书之前一定得先将它安置好, 并且给它一个它喜欢的环境, ~~用起来才会舒服~~
来看看官网安装说明

发现它需要依赖Node.js8.9或更高版本, 所以还没装的先去装好再继续 ->Node.js传送门

接着要带它进来我家搂~

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

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

vue --version

确认后就可以开始来用它啰~

#建立一个新专案

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

vue create hellovuecli

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

第一个会碰到的问题, 是否要使用预设的设定来建立专案:

预设的部分包含babel与eslint套件, 其他的就没有了
这边选第二个, 让我们自订看要安装什么套件吧~

接着遇到第二个问题, 要安装哪些套件:

(O)babel: 可以把ES6语法编译为ES5(O)Router: Vue-Router套件, 用于切换页面(X)Vuex: 用于集中管理vue元件的资料状态, 在大型专案上非常好用(X)Linter / Formatter: 协助检查程式码是否正确的工具, 常用在让不同写法的开发人员统一规範他们的写法(注: 此工具六角老师建议新手不要安装, 以免遭受打击