建立 Vue 專案樣板

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

安裝

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

$ npm install -g vue-cli

初始化專案

這邊有一些 vue-templates 樣板

$ vue init <template-name> <project-name>

範例

$ vue init webpack 專案名稱

這個工具比較像是基礎的 Vue 的 scaffolding 工具。

?Project name(texts)
?Project description(A Vue.js project)
?Author
?Install vue-router?(Y/n)
?Use ESLint to lint your code?(Y/n) NO
?Pick an ESLint preset(Use arrow keys)
?Setup unit tests with Karma + Mocha?(Y/n) NO
?Setup e2e tests with Nightwatch?(Y/n) NO

<template-name> 可以輸入官方提供的幾種專案的 template,依照你個人喜好,若你不知道有哪些現有的 template,裝完 vue-cli 後,下vue list即可以看:

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

若你想要詳細斟酌這些 template 的內容,可以上 vue-templates 的 Repo 上去看看。

除了這些官方的 template,可能沒有剛好適合你的,你也可以考慮寫自己的 template,或是如果不方便上傳,也可以寫 local template,這邊不做介紹,在麻煩你移駕到 vue-cli

github 上的 Readme.md 查看。

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

$ cd 專案資料夾

初始專案資料夾

執行 dev 程式(也在 package.json 中),項目開發模式

專案資料夾> npm install

執行

$ npm run dev

產生

 DONE  Compiled successfully in 2962ms

> Listening at http://localhost:8080

預設網址:localhost:8080

項目打包

執行 build 腳本,項目文件打包

$ npm run build

results matching ""

    No results matching ""