vue入門(安裝環境與搭建專案)
前言
最近一同事專案上需要用到vue技術,對於完全沒有學過,只是對vue充滿好奇的路上,在目前結束專案且比較閒的今天,入手學習了下vue。先從安裝環境與搭建專案開始。為下一個專案做準備!
網際網路這一行業,一旦沒有專案也就意味著離離職不遠了,所以保持點危機感,對於未知的前方也許碰到了這項技術,你可以說正好我會,正好我熟悉,正好我精通。機會總是留給有準備的人,不是嘛~
【寫這篇文章時,我對 vue.js的瞭解,只限於用來做移動端,是一個框架。】
入坑路線如下:
第一步:先了解官方文件,看自己是否適合學習
第二步:百度查詢有關搭建vue專案的方法(自學的情況下),有技術人員在,這篇文章你可以翻篇兒啦。像我一樣自學可以跟著我的步驟走,也可以跟著我參考文章的步驟走。
這裡附上兩篇我的參考文章,這裡是兩種方法,任選一就好,我太笨了,果斷的將兩篇給結合了,花了很多時間。
今天在安裝的過程裡,截了不少圖,所以想整理一下,做一個記錄,以後說不定也能用上。
安裝環境:
在官網裡下載安裝包(左邊為穩定版,右邊為最新版,建議用谷歌瀏覽器下載,這個過程中用360與火狐瀏覽器下載都失敗了)
下載穩定版node.js
下載後一路next,安裝成功後,執行cmd命令(window鍵+R輸入cmd回車),在cmd輸入命令 node -v,回車 及 npm -v,回車,如果出現下面的版本資訊則表示安裝成功。我是穩定版本,所以為V8.11.3。(如果是最新版本,則為v10.8.0),這裡npm在安裝node.js時系統自帶。
檢測是否成功安裝
構建vue專案
1.全域性安裝(這個過程裡輸入命令點選回車後,需要等待一會,等載入後出現下一行命令再進行輸入)
1、輸入:npm install -g vue-cli 回車
全域性安裝vue-cli
2、輸入:npm config set registry ) 回車【如果使用csdn,執行2、3,不使用可以跳過本步驟】
安裝淘寶映象
3、輸入:cnpm install node-sass --save (使用淘寶映象安裝node-sass)回車
輸入:cnpm install node-sass --save-dev 回車
輸入:cnpm install sass-loader --save-dev 回車
安裝save-dev
2.建立專案
下面是對專案名稱的解釋,來自簡書作者一岑不冉
來自 一岑不冉 對各種名字的解釋
1、輸入:vue init wepack my-project 回車(依次建立自己的專案名稱,以下的是直接建立到c盤。)
將內容建立到C盤裡
輸入:cd my-project 回車
npm安裝
輸入:npm dev 回車跑起來
8080表示ok
在瀏覽器輸入: 執行
成功
作者:耳耳日記
連結:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2471/viewspace-2817316/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Vue搭建專案環境Vue
- Vue入門(1)安裝vue環境,建立Vue2 Vue3的專案並且安裝IIS環境和釋出到IISVue
- Vue.js入門之環境搭建Vue.js
- SpringMVC入門與環境搭建SpringMVC
- NodeJS安裝與環境搭建NodeJS
- JBOSS安裝與配置搭建本地專案環境(方便前端開發調式)前端
- 小白學習Vue(11)--環境安裝及專案構建 | webstorm構建vue專案VueWebORM
- zabbix環境安裝搭建
- golang 入門之環境搭建Golang
- Mule 入門之:環境搭建
- 入門(一)搭建GAE環境
- Vue2.0 新手入門 — 從環境搭建到釋出Vue
- Golang入門(1):安裝與配置環境變數的意義Golang變數
- Elasticsearch快速入門和環境搭建Elasticsearch
- Streamsets專案git環境搭建Git
- Play Framework 2.5 環境搭建與新建專案(一)Framework
- Play Framework 2.5 環境搭建與新建專案(二)Framework
- Mac 下 vue 開發環境的搭建以及專案建立MacVue開發環境
- Angular入門到精通系列教程(4)- 開發環境搭建以及入手專案Angular開發環境
- Laravel + Vue3 環境安裝LaravelVue
- Python爬蟲入門【1】: CentOS環境安裝Python爬蟲CentOS
- scrapy入門教程1:scrapy環境配置以及安裝
- Java爬蟲專案環境搭建Java爬蟲
- django專案開發環境搭建Django開發環境
- 【Struts2】--專案環境搭建
- Vue專案如何分環境打包Vue
- Ionic2入門教程(一)安裝和環境配置
- Web 滲透測試入門:環境搭建、流程與實踐Web
- ARM環境搭建 — CodeWarrior 的安裝
- 怎麼離線安裝vue環境Vue
- 01 . Vue簡介,原理,環境安裝Vue
- Flutter入門之Mac最詳環境搭建FlutterMac
- Flutter入門教程(二)開發環境搭建Flutter開發環境
- Mac 後端入門開發環境搭建Mac後端開發環境
- 利用nginx 配置vue多專案環境NginxVue
- 搭建VUE開發環境Vue開發環境
- vue專案安裝lessVue
- PHP開發環境 03 - 使用KFKDock搭建PHP專案環境PHP開發環境