vue第一課,安裝以及網址等記錄

官方小可爱發表於2024-07-25

一、裝node.js

網址:https://nodejs.org/zh-cn

1.安裝時發生問題

這一步預設就可以,基本就是安裝過程預設選項

2.用cmd試一下npm和node兩個命令有沒有?不要用powershell

這就算兩個都有了

3.要先安裝vue-cli,vue的cli命令

npm 全稱 node package manager,以後要用這命令不要死記

npm install -g @vue/cli

-g代表的是全域性,globe這個詞的縮寫

npm安裝 vue-cli

試一下vue -V這個命令,可不可以

備註:node安裝vue-cli,類似於C#的包管理nuget,同樣的,node.js也有自己的包管理系統,來源https://www.npmjs.com/,也是聯網下載的東西

4.這應該是建立一個專案,專案名字是 lean_vue2

換國內源,https://cloud.tencent.com/developer/article/1372949這個是換源方法

5.安裝vscode

https://code.visualstudio.com/

上面兩個也選上,全選就好了

6,用vscode開啟剛剛新建的專案,vscode安裝中文包,找到下圖圖示

搜尋chinese,會出來一個語言包,裝一下就可以了,同理,順便把以下三個外掛裝一下

vue分為2和3,我們現在學的是2

7.終端切成這個

8.開啟程式碼

npm run + package.json裡的命令

9.用瀏覽器開啟來看看

10.F12開啟瀏覽器前端程式碼,uni-app上面可以切換手機型號

11.嘗試改變程式碼show文字,發現瀏覽器頁面不用重新整理,直接更新

12.開啟index.vue,按照他們的示例,嘗試編寫一下方法程式碼之類的,事件,在模板裡是用@接事件,看https://cn.vuejs.org/guide/components/events.html這個部分,v-on:click 然後一般是用@縮寫

13.後續可以參考https://cn.vuejs.org/guide/introduction.html學習

相關文章