建立專案

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 檔案,剛剛的設定都可以在裡面找到喔~

results matching ""

    No results matching ""