vuejs開發環境搭建

前言：如今前端最火的是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環境已經搭建成功了。