vuejs開發環境搭建

前言:如今前端最火的是3個框架:react,vue,angular。能夠說着是哪一個框架大大改變了前端的地位。相對於angular來講。vue一樣擁有豐富的指令,而且都是典型的MVC框架,可是vue比較輕量級一些,最主要的是,它是中國人寫的。別看這是中國人寫的框架,在國際上照樣獲得了不俗的評價。css

 

咱們在開發大型vue項目的時候,一般會搭建一些開發環境,今天就來詳細的寫一下搭建環境的步驟吧html

 打開你的命令提示符(window+r),輸入cmd前端

 

第一步:準備工做vue

首先,你必需要確保本身的電腦上裝了node和npm,這裏須要注意的是,node

因爲 npm 安裝速度慢,因此使用了淘寶的鏡像及其命令 cnpm,安裝命令:react

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

 咱們再來檢查一下npm的版本:webpack

npm -v 

npm 版本須要大於 3.0,若是低於此版本須要升級它:web

cnpm install npm -g

這樣咱們的準備工做就緒了之後,準備開始咱們的環境搭建vue-cli

 

第二步:安裝vuenpm

咱們首先須要安裝vue,命令以下:

cnpm install vue

安裝完成以後,咱們能夠試一下vue命令(即單純輸入vue),若是不報錯,則vue安裝成功,否則從新安裝

 

第三步:全局安裝vue-cli

這裏須要注意一點,安裝默認的是C盤,可是我不想把項目安裝到c盤,此時,在這個地方咱們須要進入到咱們想安裝的所在地,即命令行當中的:

cd 你想要的地址

這個時候執行

cnpm install --global vue-cli

 

第四步:建立一個基於 webpack 模板的新項目

命令以下:

vue init webpack my-project

此時咱們一直回車就能夠了,遇到y/n的時候直接y 

這個時候再咱們的文件當中會出現一個文件夾:

 

這個就是咱們經過命令行下載的webpack模板

 

第五步:安裝vue的項目依賴

咱們在以前搭建postcss或者gulp的時候,都用到了項目依賴,vue也不例外

首先,進入到咱們的項目總,即my-project

cd my-project

執行依賴下載命令

cnpm install

我在這裏用了npm,由於cnpm總是失敗的緣由

這裏我剛開始安裝的時候老是報錯,多安裝幾遍便可,安裝完成之後,在你的my-project裏面會多一個依賴的文件夾,以下:

 

第六步:運行vue

運行以下命令:

cnpm run dev

  

恩呢,此時隨便找個瀏覽器,輸入localhost:8080便可:

如果此頁面,則說明你的vue環境已經搭建成功了。

相關文章
相關標籤/搜索