1. 程式人生 > >vuejs開發環境搭建

vuejs開發環境搭建

run sta 註意 創建 col 必須 擁有 使用 一點

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

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

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

第一步:準備工作

首先,你必須要確保自己的電腦上裝了node和npm,這裏需要註意的是,

由於 npm 安裝速度慢,所以使用了淘寶的鏡像及其命令 cnpm,安裝命令:

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

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

npm -v 

npm 版本需要大於 3.0,如果低於此版本需要升級它:

cnpm install npm -g

這樣我們的準備工作就緒了以後,準備開始我們的環境搭建

第二步:安裝vue

我們首先需要安裝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環境已經搭建成功了。

vuejs開發環境搭建