[Vue] 跟著Vue 闖蕩前端世界- 02 使用Vue | webpack vue
![[Vue] 跟著Vue 闖蕩前端世界- 02 使用Vue](https://i.imgur.com/axBPWDg.jpg)
透過Vue-cli建構專案略過相關套件(webpack,ESLint,babel)繁雜的設定過程前言在進行前端開發時,往往會搭配一些建置套件(ex.Gulp,Webpack)來取代重複性的人工作業,而Vue-cli是由Vue官方提供的專案樣板工具,可以快速透過指令建立出一個立即可用的開發環境,以下說明。 安裝Vue-cli套件官方建議在 Node.js (>=4.x,6.xpreferred)及 npmversion3+ 環境使用,可透過npm全域安裝vue-cli[1]套件;安裝完畢後可使用$vue-V查看版本,目前最新版本為v2.8.1,相依的vue版本為v2.1.1。$npminstall-gvue-cli 建立Vue專案透過vue-cli以下列語法...
![[Vue] 跟著Vue 闖蕩前端世界- 02 使用Vue](http://pix4.agoda.net/hotelimages/agoda-homes/5899847/61e1a790eeb181e40e8f262ea5a396dc.jpg?s=800x)
透過 Vue-cli 建構專案
略過相關套件(webpack, ESLint, babel)繁雜的設定過程
前言在進行前端開發時,往往會搭配一些建置套件 (ex. Gulp, Webpack) 來取代重複性的人工作業,而 Vue-cli 是由 Vue 官方提供的專案樣板工具,可以快速透過指令建立出一個立即可用的開發環境,以下說明。
安裝 Vue-cli 套件
官方建議在 Node.js (>=4.x, 6.x preferred) 及 npm version 3+ 環境使用,可透過 npm 全域安裝 vue-cli[1] 套件;安裝完畢後可使用 $ vue -V 查看版本,目前最新版本為 v2.8.1,相依的 vue 版本為 v2.1.1。
$ npm install -g vue-cli
建立 Vue 專案
透過 vue-cli 以下列語法建立 vue 專案結構
$ vue init <樣板名稱> <專案名稱>
可使用 $ vue list 查看官方預設樣板清單
直接使用 webpack 模板來建立 vue-demo 專案
$ vue init webpack vue-demo
建立過程可依需求調整相關選項:
建議安裝 vue-router (需要安裝作為 SPA 路由) 建議安裝 ESLint (檢查 coding style 套件,保持專案風格一致) Karma, Mocha, Nightwatch (測試相關可依需求使用)依照指示切換到專案目錄後,安裝所有專案相依套件,最後執行開發伺服器掛載專案程式
$ cd vue-demo$ npm install$ npm run dev
看到歡迎訊息表示上述作業都完成,接著就可以進行開發了...
取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
vue + webpack 起手式 | webpack vue
手動建置一個Webpack | webpack vue
起步 | webpack vue
使用Webpack 來編譯Vue.js Single File Components (.vue ... | webpack vue
Vue + webpack 起手式 | webpack vue
webpack 相关 | webpack vue
Working with Webpack | webpack vue
[Vue] 跟著Vue 闖蕩前端世界- 02 使用Vue | webpack vue
[Vue.js教學筆記]Webpack模組整合工具之安裝 ... | webpack vue
【前端】vue.js & webpack安裝@ 凱開x 慵懶日子:: 痞客邦 | webpack vue
![](https://i.imgur.com/axBPWDg.jpg)