建立 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