最近開始接觸新的專案開發模式,有別於以往在設計公司中的流程,決定筆記一下方便日後忘記查找。

 

安裝 Vue-cli

Vue-cli 是 Vue 開發者基於 webpack 設計的工具,可以快速打造 Vue 的專案開發環境,由於這些套件都是建立在 Node.js 下的,所以在使用前務必先安裝好 Node.js,當安裝好後再輸入以下指令將 Vue-cli 安裝在全域環境。

//指令為舊版本(1.x, 2.x)的安裝法,目前官方已有更新
$ npm install -g vue-cli

 

建立一個 Vue 專案

安裝好 Vue-cli 後,接著就是使用它來管理專案,首先使用以下指令來將專案初始化。

//初始化專案
$ vue init 樣板名稱 專案名稱

Vue-cli 中提供了多種樣版環境供開發者使用,詳細的樣板內容可以使用指令觀看。

$ vue list

由於我主要使用的是 webpack 來當作開發環境,所以樣板名稱使用 webpack

$ vue init webpack VueStudy

等待初始化完成後就會在指定位置建立好開發環境,並且建立好一個 sample 頁面,可以就這樣的框架開始下去開發專案。

 

安裝 pug / pug-loader / pug-filter

pug 是 html 的開發框架,有必要再另外開一篇筆記,透過以下指令來安裝 pug 核心、pug-loader 及 pug-filter。

$ npm install pug pug-loader pug-filters --save

安裝後開發環境就支援 pug 來撰寫 html 了,在寫 pug 時要附註屬性 lang 的值為 pug。

<template lang="pug">
//pug html
</templte>

 

安裝 sass / sass-loader / node-sass

最後再透過以下指令安裝 SASS 的部份,如有必要再開一篇 SASS 筆記。

$ npm install sass sass-loader node-sass --save

安裝後使用 sass 編輯 css 檔案時需要加上屬性標籤 lang 的值為 scss

<style lang="scss">
//scss here
</style>

 

執行 webpace dev-server

由於整個專案使用了許多預處理框架,所以頁面要 demo 是無法單純使用 index.html 就看到結果的,這邊必須要在專案下執行 webpack 中的 dev-server 來跑一個本機的伺服器來預覽頁面。

$ npm run dev

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料