vuejs開發環境搭建

2022-01-21 19:19:09 字數 1800 閱讀 4424

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

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

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

第一步:準備工作

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

由於 npm 安裝速度慢,所以使用了**的映象及其命令 cnpm,安裝命令:

npm install -g cnpm --registry=
我們再來檢查一下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 

這個時候再我們的檔案當中會出現乙個資料夾:

第五步:安裝vue的專案依賴

我們在之前搭建postcss或者gulp的時候,都用到了專案依賴,vue也不例外

首先,進入到我們的專案總,即my-project

cd my-project

cnpm install
我在這裡用了npm,因為cnpm老是失敗的原因

這裡我剛開始安裝的時候總是報錯,多安裝幾遍即可,安裝完成以後,在你的my-project裡面會多乙個依賴的資料夾,如下:

第六步:執行vue

執行如下命令:

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

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

Vuejs開發環境搭建及熱更新

1.1最新穩定版本 npm install vue 國內速度慢,使用 映象 npm install g cnpm registry 注意 以後使用npm的地方就替換成cnpm cnpm install g vue cli vue init webpack my project 輸入安裝命令後,稍等一...

vuejs基礎入門之環境搭建

對於小白,對命令列工具使用得很少,而在學習vuejs框架時,命令列工具必不可少,因此,我對一些不懂安裝vuejs環境的小白寫如下教程 1.vuejs是前端框架,環境借助於nodo.js,因此,我們先要安裝node.js的環境。3.開啟了以上命令列,輸入 npm install g cnpm regi...

搭建vuejs專案

1 環境安裝nodejs npm vuejs npm node npm install vue 然後檢視版本 node v npm v vue v 如果有版本號,則證明安裝成功 2 也可以利用 映象安裝,這樣比較快 npm install g cnpm registry https 3 安裝vue腳...