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入門(1)安裝vue環境,建立Vue2 Vue3的專案並且安裝IIS環境和釋出到IISVue
- Vue搭建專案環境Vue
- SpringMVC入門與環境搭建SpringMVC
- NodeJS安裝與環境搭建NodeJS
- java入門:安裝開發環境Java開發環境
- 小白學習Vue(11)--環境安裝及專案構建 | webstorm構建vue專案VueWebORM
- golang 入門之環境搭建Golang
- 安卓開發入門(一)開發環境搭建安卓開發環境
- APP自動化環境搭建與安裝(Windows)APPWindows
- Vue2.0 新手入門 — 從環境搭建到釋出Vue
- Python爬蟲入門【1】: CentOS環境安裝Python爬蟲CentOS
- Golang入門(1):安裝與配置環境變數的意義Golang變數
- Angular入門到精通系列教程(4)- 開發環境搭建以及入手專案Angular開發環境
- Elasticsearch快速入門和環境搭建Elasticsearch
- Mac 下 vue 開發環境的搭建以及專案建立MacVue開發環境
- Laravel + Vue3 環境安裝LaravelVue
- django專案開發環境搭建Django開發環境
- Java爬蟲專案環境搭建Java爬蟲
- Vue專案如何分環境打包Vue
- Ionic2入門教程(一)安裝和環境配置
- Git環境配置與安裝Git
- vue的環境搭建Vue
- node環境搭建、npm及pnpm安裝NPM
- ubuntn16.04下安裝nodejs最新版 及vue環境搭建NodeJSVue
- 本地windows搭建spark環境,安裝與詳細配置(jdk安裝與配置,scala安裝與配置,hadoop安裝與配置,spark安裝與配置)WindowsSparkJDKHadoop
- Linux詳解(基礎、環境配置、專案部署入門)Linux
- 01 . Vue簡介,原理,環境安裝Vue
- 怎麼離線安裝vue環境Vue
- vue專案安裝lessVue
- Web 滲透測試入門:環境搭建、流程與實踐Web
- IntelliJ IDEA配置與搭建web專案入門使用IntelliJIdeaWeb
- Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)Flutter開發環境VSCode
- PHP開發環境 03 - 使用KFKDock搭建PHP專案環境PHP開發環境
- 安裝配置開源的laravel專案到本地環境Laravel
- Flutter入門之Mac最詳環境搭建FlutterMac
- Mac 後端入門開發環境搭建Mac後端開發環境
- Flutter入門教程(二)開發環境搭建Flutter開發環境
- Python資料分析入門(一):搭建環境Python