Vue-cli的安裝與使用

一、基本環境搭建

首先需要安裝兩個應用：
1.NodeJS
2.npm
在NodeJS安裝完成後，npm也就會隨帶這有了。可以使用cmd命令查看是否安裝成功：

NodeJS安裝成功之後，接下來安裝vue的腳手架工具：

npm install -g vue-cli   # 只需要第一次安裝時執行
vue init webpack '項目名稱'  # 使用webpack模板創建一個vue項目
cd '項目名稱' #進入到項目目錄中
npm install  # 下載依賴（如果在項目創建的最後一步選擇了自動執行npm install，則該步驟可以省略）
npm run dev # 啓動項目

vue-cli安裝完成後，創建第一個vue項目：

因爲在創建項目時，沒有選擇npm install，所以需要手動去執行一下命令（如果選擇Yes，這裏的操作可以跳過）：

執行完成後，剛創建的項目中就會自動生成一個node_modules文件夾，這個文件夾中包含了項目運行所需的依賴：

二、Vue-cli腳手架項目結構

• 這裏使用了webStorm打開了vue-cli項目，項目結構圖如下：
  

• build 文件夾，用來存放項目構建腳本

• config 中存放項目的一些基本配置信息，最常用的就是端口轉發

• node_modules這個目錄存放的是項目的所有依賴，即 npm install 命令下載下來的文件

• src這個目錄下存放項目的源碼，即開發者寫的代碼放在這裏

• static 用來存放靜態資源

• index.html則是項目的首頁，入口頁，也是整個項目唯一的HTML頁面

• package.json 中定義了項目的所有依賴，包括開發時依賴和發佈時依賴

• src下的目錄：

  • assets 目錄用來存放資產文件
  • components 目錄用來存放組件（一些可複用，非獨立的頁面），當然開發者也可以在 components 中直接創建完整頁面。
  • 推薦在 components 中存放組件，另外單獨新建一個 page 文件夾，專門用來放完整頁面。
  • router 目錄中，存放了路由的js文件
  • App.vue 是一個Vue組件，也是項目的第一個Vue組件
  • main.js相當於Java中的main方法，是整個項目的入口js

三、啓動運行Vue

• 方式一：使用npm run dev在Terminal中啓動運行

npm run dev

• 方式二：配置webStorm-npm命令，用webStorm啓動運行

1. 配置webstorm-npm命令
   
   
   

• 運行成功：