1. 程式人生 > 實用技巧 >前端-Vue入門

前端-Vue入門

前端-Vue入門

vue-入門

本章編寫vue入門,包括環境安裝,以及使用IDEA建立vue入門專案

環境安裝

1.百度搜索node.js進入官網

2.下載LTS穩定版
node.js環境下載

3.雙擊msi檔案
安裝包

4.一直點選下一步完成安裝

5.檢測環境 使用node -v 出現版本號即安裝成功
node.js版本號
6.npm預設國外映象源,安裝映象切換工具nrm 使用npm install nrm -g
安裝nrm
6.安裝成功 檢視預設映象源 使用命令nrm ls
檢視映象源7.切換淘寶映象源使用命令nrm use taobao
在這裡插入圖片描述
8.測試連線速度 使用命令 nrm test npm

測試映象速度
9.完成安裝 重啟電腦

使用IDEA建立一個Vue入門專案

1.建立空專案
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
2.建立web子模組
在這裡插入圖片描述
在這裡插入圖片描述
3.初始化環境 使用命令npm init -y

在這裡插入圖片描述
4.安裝vue依賴 使用命令npm install vue --save
在這裡插入圖片描述
5.安裝完成後專案結構如下即環境搭建成功
在這裡插入圖片描述

Vue入門使用

1.建立html檔案
在這裡插入圖片描述
2.引入vue依賴
在這裡插入圖片描述
3.建立vue物件
在這裡插入圖片描述
4.在<body>中新增div id屬性要與vue物件的el屬性值相同
在這裡插入圖片描述
5.開啟頁面即可看到{{name}}被替換為指定值
在這裡插入圖片描述

Vue入門專案搭建完成!!!