Day 02：Vue 个专案先

本篇以 Vue CLI 开始这一回合。

Vue CLI 提供快速建置的开发环境，使用者只需透过简易设定选择组队工具，之後再输入指令便能操作基本的运行功能；如此主要让使用者能够聚焦在开发专案，省去事前研究或取舍工具配置的时间，当然後续也能再依专案需求自行调整配置选项。

首先，依官网指示进行全域安装

npm install -g @vue/cli

检查安装版本，并确认是否有安装成功

vue --version

接着就可以建立专案罗！

vue create <project-name>

建立专案，组织舰队

本系列会以书目清单作为范例，因此来取个应景的专案名称

vue create bookshelf

接着依序下列步骤，选择专案需求的工具与配置

1. 选择预设：前两个分别是 Vue 2 和 Vue 3 的基本款组合，只包含 babel 和 eslint 而已
   → 本专案选择第三个选项，手动组织豪华舰队
   

2. 选择功能：基本款 Babel 和 Linter 帮你勾好了，其他就依专案需求自选组合
   → 本专案加购 Router、Vuex、CSS Pre-processors（for Sass）
   

3. 选择 Vue 版本
   → 本专案以 Vue 2 开发
   

4. 路由配置是否选择 History mode
   → 选择 History mode，大写字母通常也是建议选项
   

   • n－hash mode：使用 # 模拟 url，例如 www.example.com/#/home，井字号後面的路由变化不会向 server 发出请求，因此页面不会重新载入
   • Y－History mode：显示一般的 url，例如 www.example.com/home，路由变化利用 history.pushState API 就能完成 URL 跳转，一样不会重新载入页面

5. 选择前置处理器
   → 本专案使用 dart-sass
   

6. 选择 linter / formatter：基本设置 ESLint 用来检查语法，Formatter 用来统一程序码格式
   → 本专案使用 ESLint + Prettier
   

7. 选择 lint 功能：选择检查时机
   → Lint on save，在储存时立即检查语法
   

8. 选择设置档存放位置
   → In dedicated config files，让配置档各自独立，有需要再建立配置档即可
   

9. 日後是否以本次选择作为通用预设选项
   → 当然是先不要喔！未来因应不同专案需求可能会改变选项，再次看到大写 N 给它选下去
   

开启专案

以上设定完成之後，差不多等个半分钟，让 Vue CLI 建置一下你刚才所选择的舰队环境，最後看到下图这段文字，就代表你的专案已建置完成，可以用指令开启它了！

移动前往专案根目录

cd bookshelf

透过在 package.json 里的 scripts 指令启动服务器来运行专案

npm run serve

接着点选本地端 localhost 位址，就会看到 Vue 公版页面，大功告成！

参考资料

• Vue CLI
• Vue Router - HTML5 History Mode