vue-cli3.0創建項目之完成登錄頁面


借鑒博客:https://www.cnblogs.com/KenFine/p/10850386.html

接着上一個創建的新項目vue-mydemo01來:

1、創建一個login.vue組件頁面:如下:

 

 

 

 

2、路由配置,在router目錄下index.js文件中配置如下:

 

 

 

 

3、運行項目:yarn serve,打開瀏覽器如下:localhost:8080/#/login

  注意:把app.vue中的div中一定要加入代碼:<router-view></router-view>

 

 

 

 

 

==========一個項目的login頁面雛型就弄出來了==================

下面使用element-ui框架,開始搞登錄頁面內容:

1、開始安裝element-ui插件:(由於以后要用到很多插件,現在就把以后要用的一些常插件安裝了如:vuex、axios、sass等等等等等等 ),yarn安裝插件命令:

$ yarn add vuex axios element-ui --save

  yarn add node-sass  -D

  yarn add sass-loader -D

  yarn add style-loader -D

 

  安裝完成后,package.json插件部分內容如下:

 

  

2、在main引入Element-ui:

 

 

 

 

3、去Element-ui官網使用它的各種表單按鈕,把代碼放到自己頁面,調試一下就行了:

 

 

 

4、樣式怎么調就不貼了,結果如下:

 

 

 

 

 

 

 

 

 

5、使用aixos插件,自定義一下插件方便使用:

  創建項目的時候已經安裝了aixos插件了,這里就不安裝了

  

  5.1、創建plugins目錄,再創建httpUtils.js文件,內容如下:

 

 

 

 

  5.2、在main.js中引用:

 

 

 

=======aixos插件在login頁面中使用===============

  5.3、http請求插件我使用aixos,雖然vue有自己的vue-resource插件,但現在用aixos插件比較多:

    可以看到剛才封裝的aixos功能的文件httpUtils.js已經使用上了

 

 

 

  5.4、使用aixos插件發送登錄請求:

    先設置一下請求url的基本路徑前綴:在剛才封裝的axios功能的httpUtils.js文件中設置,如下:

 

 

    

    使用post請求:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。。。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM