Vue的安裝及使用快速入門

vue是一個JavaMVVM庫，是一套用於構建用戶界面的漸進式框架，是初創項目的首選前端框架。它是以數據驅動和組件化的思想構建的，採用自底向上增量開發的設計。它是輕量級的，它有不少獨立的功能或庫，咱們會根據咱們的項目來選用vue的一些功能。它提供了更加簡潔、更易於理解的API，使得咱們可以快速地上手並使用Vue.js。

1、安裝vue

一、安裝node.js，安裝完node.js以後，npm也會自動安裝

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

node -v

npm -v

二、全局安裝腳手架工具vue-cli，命令以下：

npm install --global vue-cli

三、vue項目初始化命令以下，若沒有安裝webpack，則先安裝webpack

npm install -g webpack

vue init webpack myVue

注：安裝過程 中有個選項（Use ESLint to line your code ?選擇 No ）

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

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

命令以下：

cd myVue

npm install

五、運行項目：

npm run dev

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

六、結束項目運行：

ctrl+v，選擇Y便可中止項目的運行

2、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 格式

3、vue項目啓動流程

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

 

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

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

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

 

注：vue運行是基於node環境的,構建vue框架以前,須要確保node環境安裝成功

4、Vue的組件的使用

一、在components文件夾下建立.vue結尾的文件

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

header.vue文件內容以下：

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

2.一、引入組件

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

2.二、配置組件路由

{

path: '/header',

name: 'header',

component: Header

}

三、運行項目：npm run dev

四、在瀏覽器中輸入：localhost:8080/header ,顯示以下頁面：

附：vue生命週期示意圖