如何用vue-cli腳手架搭建Vue項目

閒聊一下子 >_< 這篇文章只是剛剛打開vue的大門,放輕鬆~~

安裝node環境

先檢測下node版本吧!或許你尚未安裝node呢~
(若是使用Mac在安裝的時候報錯,除了網絡緣由就是權限問題,你要在安裝的指令前加上sudo)vue

在終端輸入指令node

$  node -v

若是你看不到版本號的話,那就勞煩去官網安裝一個吧。
固然,若是你安裝了node,天然就會有npm工具了。
官網地址:https://nodejs.org/en/download/webpack

安裝vue-cli腳手架工具

接下來,咱們就能夠先全局安裝vue-cli~web

在終端輸入指令vue-router

$ npm install -g vue-cli

=======......若是等的實在是太漫長了,那就Ctrl+c結束這段漫長的等待,使用國內的淘寶鏡像cnpm
在終端輸入指令vue-cli

npm install -g cnpm –registry=[https://registry.npm.taobao.org]

安裝完成後能夠輸入cnpm -v去檢測,若是返回版本號,說明安裝成功。只要把npm換成cnpm的寫法就能夠愉快的使用淘寶鏡像去安裝你須要的東西了。npm

最後,檢測一下咱們是否安裝成功了vue-clijson

在終端輸入指令瀏覽器

$ vue - V

注意是大寫的V,大寫的~
看到版本號了,說明安裝成功了。網絡

初始化項目

首先,cd到本身想要建立新項目的文件夾下
< vue init 模板類型 項目名稱 > 以這樣的格式
其中,模板類型有:

  • browserify -- 全功能的Browserify + vueify,包括熱加載,靜態檢測,單元測試
  • browserify-simple -- 一個簡易的Browserify + vueify,以便於快速開始。
  • webpack -- 全功能的Webpack + vueify,包括熱加載,靜態檢測,單元測試
  • webpack-simple -- 一個簡易的Webpack + vueify,以便於快速開始。

(根據項目需求來選擇模板類型,我這裏就選擇最全面的webpack模板吧!)

在終端輸入指令

$ vue init webpack item

item是我本身取的項目名稱
而後,就會讓你填寫一些項目的信息(不知道選什麼就一路回車就對了,哈哈~對了,填寫項目名稱要小寫字母哦!)

個人正在初始化,但是好慢,也許是網速的緣由吧~
報錯了!!應該是忘了給權限~

再次在終端輸入指令

$ sudo vue init webpack item

噢耶!終於初始化成功了!

接着,cd進入到建立的目錄

按照我標註的紅色框框去一步步作~
第一,進入到建立的目錄
第二,輸入指令 npm install ,由於自動構建過程當中已存在package.json文件,因此這裏直接安裝依賴就行。(安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource,輸入:cnpm install vue-router vue-resource --save)。
第三,啓動項目,輸入指令 npm run dev
第四,複製http://localhost:8080這個連接,瀏覽器會默認打開一個「歡迎頁面」。

vue-cli建立的項目目錄結構及說明

相關文章
相關標籤/搜索