Vue.js 安裝 及簡單使用，詳細介紹

準備 Vue.js 之前要先有 node.js。

• node.js 安裝網址：https://nodejs.org/en/download/。

• 具體安裝步驟參考：https://www.runoob.com/nodejs/nodejs-install-setup.html

vue.js 有著名的全家桶系列

包含了vue-router，vuex， vue-resource，
再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。

安裝好後，就要

安裝 Vue.js了。

1. 安裝node.js，安裝完node.js之後，npm也會自動安裝

   查詢是否安裝成功的命令：

   node -v
   
   npm -v
   

2. 全局安裝腳手架工具vue-cli，命令如下：

   npm install --global vue-cli
   

3. vue項目初始化命令如下，若沒有安裝webpack，則先安裝webpack

   npm install -g webpack   // 安裝 webpack
   npm cache clean --force    // 清除 npm 緩存
   

   項目

   vue init webpack myVue // myVue 項目名稱
   
   project name（項目名稱）  按回車
   
   project description（項目描述） 按回車
   
   author（作者） 按回車
   
   vue build（解釋器） 按回車
   
   Install vue-router(路由) 按y按回車
   
   use aslantto lint your code(代碼檢查) 按n按回車
   
   set up unit tests(測試模塊) 按n按回車
   
   setup e2e tests with night watch(是否安裝e2e) 按n按回車
   
   should we run ’npm install’(是否選擇npm方式)選第一個，按回車
   

• 初始化完成後的vue項目目錄如下：
  

4. 進入到myVue目錄下，使用npm install 安裝package.json包中的依賴

   命令如下：

   cd myVue
   
   npm install
   

5. 運行項目：

   npm run dev
   

   
   
   在瀏覽器上輸入：localhost:8080，將會出現下面的vue初始頁面：

6. 結束項目運行：

   ctrl+c，選擇Y即可停止項目的運行

二、vue項目目錄說明

文件名	介紹
build	項目構建(webpack)相關代碼
config	配置目錄，包括端口號等
node_modules	npm加載的項目依賴塊
src	這裏是我們要開發的目錄，基本上要做的事情都在這個目錄裏。裏面包含了幾個目錄及文件：
assets	放置一些圖片，如logo等
components	該目錄裏存放的我們的開發文件組件，主要的開發文件都存放在這裏了
App.vue	項目入口文件
main.js	項目的核心文件
router	路由配置目錄
static	放置一些靜態資源文件
test	初始測試目錄，可刪除
.xxxx文件	這些是一些配置文件，包括語法配置，git配置等
index.html	首頁入口文件
package.json	項目配置文件
README.md	項目的說明文檔，markdown 格式

三、vue項目啓動流程

1. 在執行npm run dev的時候，會去在當前文件夾下的項目中找package.json文件,啓動開發服務器，默認端口是8080；

2. 找到src的main.js文件，在該文件中new Vue的實例，要加載的模板內容App；

3. App是src目錄下的App.vue結尾的文件；

4. 在App.vue所對應的模板當中，有一個router-view在src目錄下有一個router文件夾，該文件夾有個index.js文件，該文件是配置路由詞典，指定了路由地址是空，加載HelloWorld組件

注：剛纔也說過了，vue運行是基於node環境的，所以 構建vue框架之前，一定要確保node環境安裝成功

四、Vue的組件的使用

1. 在components文件夾下創建.vue結尾的文件

   例如在：src/components/public/ 目錄下新建 header.vue 文件

   header.vue文件內容如下：

2. 在路由配置文件src/router/index.js中引入組件並配置組件路由

• 引入組件

  import Header from '@/components/public/header'
  

• 配置組件路由

  {
  	path: '/header',
  	name: 'header',
  	component: Header
  }
  

3. 運行項目：npm run dev

4. 在瀏覽器中輸入：localhost:8080/header ,顯示如下頁面：

附：vue生命週期示意圖

參考原址：https://baijiahao.baidu.com/s?id=1621989444415819861&wfr=spider&for=pc