建立專案
Step 1. 專案初始化
vue init <template-name> <project-name>
<template-name> 就是之前提及的 6 種樣板,<project-name> 是專案資料夾名稱,也可使用指令 vue list
查看所有樣板。
舉實例來說,假如要使用 webpack 樣板建立一個名為 hello-vue 的專案, 指令如下:
vue init webpack hello-vue
Step 2. 環境設定
接著會需要填寫一些專案資訊及設定環境,可依專案需求調整相關選項。
- Project name:
專案名稱
- Project description:
專案描述
- Author:
作者
- Vue build:
Runtime + Compiler 及 Runtime-only 兩種
- Install vue-router:
是否安裝 vue-router
- Use ESLint to lint your code:
是否使用 ESLint 來規範程式碼
- Pick an ESLint preset:
Standard、Airbnb 及 none 三種
- Set up unit tests:
是否加入單元測試
- Setup e2e tests with Nightwatch:
是否加入 e2e 測試
- Should we run `npm install` for you after the project has been created:
完成後是否自動執行 npm install
都看不懂的話你也可以一路 Enter 到底,之後就會開始安裝了,也可參考我的個人設定:
Step 3. 安裝專案套件
先切換至專案目錄下
cd hello-vue
如果剛剛選擇自動執行 npm install
,就無需重複以下動作。
npm install
安裝完後會發現專案資料夾裡多了許多奇妙的檔案,之後的章節裡都會稍加說明,其中有個 package.json 檔案,剛剛的設定都可以在裡面找到喔~