用Vue實現乙個登陸介面

2022-03-05 13:43:27 字數 1101 閱讀 1088

最近由於一些原因,開始學習vue的專案開發,對於我這樣乙個剛剛入行的菜鳥級c#程式設計師,可真踩了不少坑,

接下來,廢話少說。

本人win10開發環境(資深大佬勿噴,我沒有mac,也沒有安裝linux環境)

1.首先安裝node環境,本專案中主要是用來做包管理。傳送門(

2.安裝vue 

開啟控制台輸入,並等待完成

npm insatll vue -g
3.安裝vue-cli(腳手架),用來構建專案。傳送門(

npm install -g vue-cli
我們這裡使用webpack作為腳手架,初始化我們的專案(注意,專案名必須是小寫)

vue init wepcak my-project
1.目錄如下(visual studio code 個人認為挺好用的)

我們現在可以進入專案目錄(根據自己的專案名)

cd my-project

npm run dev // 這樣就可以看到我們剛剛構建的專案,相信你也和我一樣懵逼吧。

2.進行我們的改造,接下來才是正題(code show)

我們的原始碼主要是在src目錄下,(刪除該目錄下原始檔案)

目錄情況如下

|-------src

|         |-- components

|         |    |-- main.vue

|         |    |-- login.vue

|         |-- main.js

|------- index.html  (提示,在根目錄下)

本次示例採用的是vue2.0版本,希望大家批評指正不當之處。

原始碼奉上   2018-03-2416:03:57

Qt 登陸介面實現

qt 登陸介面實現 新專案要用到qt,所以最近研究qt,昨天安裝好部署好qt creator現在馬上開始第乙個程式。做乙個簡單的登陸 介面功能 效果圖如下 部分 mainwindow.h include logindlg.h 主介面logindlg login 登陸介面 if login.exec ...

Qt 登陸介面實現

新專案要用到qt,所以最近研究qt,昨天安裝好部署好qt creator現在馬上開始第乙個程式。做乙個簡單的登陸介面功能 效果圖如下 部分 mainwindow.h include logindlg.h int main int argc,char argv else return0 ifndef ...

JS實現登陸介面

lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle input divstyle head myform 登陸 type text id t1 value 密碼 ...