使用 Vue-cli 快速建立 Vue 專案樣板

Vue 官方提供了一個 vue-cli 工具可以快速建立 vue 的專案,首先你需要以下:
  • Node.js 環境
  • Npm


接者透過 npm 安裝 vue-cli,-g 代表是全域安裝。
npm install -g vue-cli

初始化一個專案的方式:
vue init <template-name> <project-name>

其實這個工具比較像是基礎的 Vue 的 scaffolding 工具。
<template-name> 可以輸入官方提供的幾種專案的 template,依照你個人喜好,若你不知道有哪些現有的 template,裝完 vue-cli 後,下 vue list 即可以看:


每一種後面都有解釋,掛上 -simple 的當然是拔掉更多的也許你暫時不需要的功能。

  • webpack: 包含 Webpack, vue-loader 以及 hot reload, linting, testing & css extraction.
  • webpack-simple: A simple Webpack + vue-loader setup for quick prototyping. (比前者又更基礎版)
  • browserify: Browserify + vueify setup with hot-reload, linting & unit testing.
  • browserify-simple: Browserify + vueify setup for quick prototyping. (比前者又更基礎版)
  • simple: 只有 Vue 跟一個 html 檔案。 

若你想要詳細斟酌這些 template 的內容,可以上 vue-templates 的 Repo 上去看看。 除了這些官方的 template,可能沒有剛好適合你的,你也可以考慮寫自己的 template,或是如果不方便上傳,也可以寫 local template,這邊不做介紹,在麻煩你移駕到 vue-cli github 上的 Readme.md 查看。

Simple Template 示範
示範: 假如你未曾用過 webpack, browserify,那就是用最基本款的 simple:
vue init simple myBlog

初始化的時候會問你一些問題,如果沒特別說什麼,就一直 enter。 (這步驟比 npm init 步驟還要少)


cd myBlog

切到 myBlog 專案目錄下。裡頭只有一個簡單的 index.html,但他不是空的檔案哦! 裡面是有 sample code的。


Webpack Template 示範
win@windeMacBook-Air /tmp  vue init webpack my-blog-w

? Project name my-blog-w
? Project description A Vue.js project
? Author winwu <XXX.gmail.com>
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-blog-w".

   To get started:

     cd my-blog-w
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

webpack 的 template 完整很多,若沒有特別的喜好,一直按下 enter 就是,專案就產生,但記得只是幫你把資料夾產生好,還是要進到資料執行 npm install 把相依性套件都裝下來。

大概是這樣,還蠻簡單的,難的是後面的應用 XDD

留言

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源