vue環境搭建

 

1. 安裝node.js
從node.js官網下載並安裝node，安裝過程很簡單，一直點下一步就ok了，安裝完以後，咱們經過打開命令行工具（win+R）,輸入 node -v 命令，查看node的版本，若出現相應的版本號，則說明你安裝成功了。
node -v 查詢node版本號
npm -v 查詢npm版本號

 npm包管理器，是集成在node中的，因此安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本信息。

2. 安裝cnpm

命令行中輸入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ，而後等待，沒報錯表示安裝成功

注：我配置到了D盤，需另配置一下環境變量。

 

 

3.安裝vue-cli 腳手架構建工具

在命令行中運行命令 npm install -g vue-cli ，而後等待安裝完成。

 

4.建立項目。

首先咱們要選擇存放項目的位置，而後再用命令行將目錄轉到選定的目錄。我配置到F盤下的 vue目錄下了。

 ① ， 切換目錄

② ， 在vue目錄下，輸入命令 vue init webpack vueappone 。解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。其中vueappone是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中

 　　如：F:\EditCodeArea\vue>vue init webpack vueappone

 ③運行初始化命令的時候會讓用戶輸入幾個基本的配置選項，如項目名稱、項目描述、做者信息，對於有些不明白或者不想填的信息能夠一直按回車去填寫就行了，等待一會，就會顯示建立項目建立成功。

 接下來，咱們去vue目錄下去看是否已建立文件：

 打開vueappone項目，項目中的目錄以下：

 

 

介紹一下目錄及其做用：

     build：最終發佈的代碼的存放位置。

     config：配置路徑、端口號等一些信息，咱們剛開始學習的時候選擇默認配置。

     node_modules：npm 加載的項目依賴模塊。

     src：這裏是咱們開發的主要目錄，基本上要作的事情都在這個目錄裏面，裏面包含了幾個目錄及文件：

             assets:放置一些圖片，如logo等

             components:目錄裏放的是一個組件文件，能夠不用。

             App.vue：項目入口文件，咱們也能夠將組件寫這裏，而不使用components目錄。

            main.js ：項目的核心文件

     static：靜態資源目錄，如圖片、字體等。

     test：初始測試目錄，可刪除

      .XXXX文件：配置文件。

     index.html：首頁入口文件，能夠添加一些meta信息或者同統計代碼啥的。

     package.json：項目配置文件。

     README.md：項目的說明文件。

  

    這就是整個項目的目錄結構，其中，咱們主要在src目錄中作修改。這個項目如今還只是一個結構框架，整個項目須要的依賴資源都尚未安裝。

5.  安裝項目所須要的依賴：執行 cnpm install   (這裏能夠用cnpm代替npm了)

   路徑：F:\EditCodeArea\vue\vueappone>cnpm install

 

  安裝完成以後，咱們到本身的項目中去看，會多一個node_modules文件夾，這裏面就是咱們所須要的依賴包資源。

 

   安裝完依賴包資源後，咱們就能夠運行整個項目了。

6.運行項目。

 在項目目錄中，運行命令 npm run dev ，會用熱加載的方式運行咱們的應用，熱加載可讓咱們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。

 

  項目啓動後，在瀏覽器中輸入項目啓動後的地址： http://localhost:8080    

此時，個人項目並無運行起來。

7.vue項目配置成功項目，頁面不能顯示。

想着多是端口衝突。修改端口號試試。

① ，打開vueappone——config——index.js

好比個人路徑是：F:\EditCodeArea\vue\vueappone\config/index.js

②，找到 index.js中 port。修改端口號。

③， 再次在項目目錄中，運行命令 npm run dev 

　　 路徑：F:\EditCodeArea\vue\vueappone>npm run dev

④， 此時端口號爲9039。瀏覽器中輸入：http://localhost:9039

 

 

 

項目建立成功。

 

 

參考文獻：https://blog.csdn.net/m0_37479246/article/details/78836686