之所以取這個標題，是因為本文來自內部培訓的整理，培訓的對象是公司的 .NET 程序員，.NET 程序員學習 Vue 是為了在項目中做二次開發(fā)時能夠更好地跟產(chǎn)品對接。

Vue 是現(xiàn)在比較流行的前端框架，也是非常容易入門的前端框架，花幾個小時看看官方文檔基本就入門，如果連官方文檔都懶得看，那本文或許對您有所幫助。

開發(fā)一個站點最基本的知識點，我認為有以下幾個：

• 頁面組裝

• 頁面跳轉

• 頁面?zhèn)髦?/p>

• 接口調用

.NET 程序員通常會采用 Asp.Net 或 Asp.Net MVC 來開發(fā)網(wǎng)站，對于上面四點，在 .NET 中的對應關系如下：

知識點Asp.NetAsp.Net MVC

頁面組裝	Aspx頁面、用戶控件、MasterPage	視圖、分部視圖
頁面跳轉	鏈接、Redirect	路由
頁面?zhèn)髦?/td>	QueryString、Session等	ViewBag、ViewData等
接口調用	Ajax	Ajax

在 Vue 中、使用「組件」來組裝頁面，使用「路由」來做頁面的跳轉，傳值分為「路由參數(shù)」和「組件之間的通訊」，接口的調用使用官方推薦的「axios」。

下面以一個簡單的登錄示例來講解上面說到的一些知識點。

環(huán)境安裝

首先安裝 nodejs ,可以在http://nodejs.cn/download/找到相關的版本進行安裝。

Vue的使用有兩種模式，直接引用 Vue 的 js 文件，或者使用腳手架生成完整的項目框架，這里我們使用腳手架的方式，使用下面命令進行安裝

npm?install?-g?@vue/cli

創(chuàng)建應用

使用下面命令創(chuàng)建名為 hello-world 的應用

vue?create?hello-world

Vue 創(chuàng)建應用時分為默認模式和手動模式，這里我們選擇默認模式

創(chuàng)建完成后，項目的目錄結構如下

• public：public中的靜態(tài)資源會復制到最終打包的dist目錄中

• src：編寫代碼主要要操作的目錄

• src/assets：存放靜態(tài)資源，如圖片、字體等

• src/components：組件目錄

• src/App.vue：根組件

• src/main.js：入口文件

• 下面的一些配置文件可以暫時不做深入研究

運行應用

在命令行輸入npm run serve，運行起來后，在瀏覽器中輸入http://localhost:8080,就可以訪問站點了。

作為一個.NET程序員，本機通常安裝有IIS，在IIS中可能有站點將8080端口占用了，這時就需要指定端口的方式來啟動

.\node_modules\.bin\vue-cli-service?serve?–port?4000

一個簡單的登錄示例

安裝 ElementUI

npm?i?element-ui?-S

安裝完成后在 main.js 中進行引用

import?Element?from?'element-ui'; import?'element-ui/lib/theme-chalk/index.css';Vue.use(Element,?{?size:?'small',?zIndex:?3000?});

添加 login.vue 組件

在 components 目錄中添加 login.vue 組件文件，代碼如下：

<template><el-form?ref="ruleForm"?:model="formModel"><p?class="title">登錄</p><el-form-item?required><el-input?v-model="formModel.loginName"?placeholder="請輸入登錄名"?size="large"></el-input></el-form-item><el-form-item?required><el-inputtype="password"v-model="formModel.password"@keyup.native="keyup"placeholder="請輸入登錄密碼"size="large"></el-input></el-form-item><p?v-show="showErrorMessage"?class="alert">{{?errorMessage?}}</p><el-form-item><el-button?type="primary"?size="medium"?@click="login"?>登錄</el-button></el-form-item></el-form> </template> <script> export?default?{name:?"login",data()?{return?{errorMessage:?"",formModel:?{loginName:?"",password:?""}};},watch:?{"formModel.password":?function(val)?{if?(val.trim()?!==?"")?{this.errorMessage?=?"";}?else?{this.errorMessage?=?"請輸入密碼";}}},computed:?{showErrorMessage()?{return?this.errorMessage?!==?"";}},mounted:?function()?{},methods:?{keyup(event)?{if?(event.keyCode?===?13)?{this.login();}},login()?{const?loginName?=?this.formModel.loginName;const?password?=?this.formModel.password;if?(loginName?===?"")?{this.errorMessage?=?"請輸入登錄名";return;}if?(password?===?"")?{this.errorMessage?=?"請輸入密碼";return;}//調用接口驗證}} }; </script> <style?scoped></style>

• data()：組件中使用到的數(shù)據(jù)需要以對象的方式在 data() 函數(shù)中返回

• watch：監(jiān)聽屬性，上面例子中監(jiān)聽 formModel.password 的值，當改變時，修改 errorMessage

• computed：計算屬性，例子中當 errorMessage 的值從空變成非空，或者從非空變成空時才會觸發(fā)

• mounted：頁面加載完成后執(zhí)行，如果登錄組件想要請求接口設置一個背景圖，可以寫在這里

• methods：常規(guī)的 js 方法就放在這里

安裝路由

1、安裝路由插件

npm?install?--save?vue-router

2、在 main.js 中引入路由

import?router?from?'./routers/router'new?Vue({router,render:?h?=>?h(App), }).$mount('#app')

3、在 src 目錄中添加 routers 目錄，在該目錄新增 router.js 文件，內容如下

import?Vue?from?"vue"; import?Router?from?"vue-router"; Vue.use(Router); const?router?=?new?Router({mode:?'history',routes:?[{path:?"/login",name:?"login",component:?()?=>import?("@/components/login.vue")},{path:?"*",redirect:?"/"}] }) export?default?router;

添加了 /login 的路由地址，指向 login.vued的組件

4、修改 App.vue 組件

??<div?id="app"><img?alt="Vue?logo"?src="./assets/logo.png"><router-view></router-view></div>

添加了 router-view 后，路由中指定的組件就會被替換到此處。

5、此時訪問 http://localhost:8080/login 可以看到下面界面

添加 home.vue 組件

home 組件是登錄成功后要跳轉到的組件，該組件包含一個子組件 top-bar。

1、在 components 目錄下添加 top-bar.vue 和 home.vue 文件

top-bar.vue

<template><div>這是網(wǎng)站的頭部</div> </template> <script> export?default?{name:"top-bar" } </script> <style?scoped></style>

home.vue

<template><el-container?id="main-view"><el-header?class="header"><top-bar></top-bar></el-header><el-main>這是正文部分</el-main></el-container> </template><script> import?TopBar?from?"@/components/top-bar.vue"; export?default?{name:?"home",components:{TopBar} }; </script> <style?lang="css"?scoped> .header{background-color:?rgb(0,?120,?215);color:aliceblue;padding-left:0;height:48px; } </style>

2、修改 login 組件的 login() 方法，添加登錄路由跳轉的邏輯

3、修改 router.js ，添加登錄后跳轉的路由配置

運行后，點擊登錄按鈕就可以跳轉到 home 組件了。

路由傳參

登錄成功后，將登錄名傳遞到 home 組件中，通過路由傳參的方式有很多種，這里使用 query 的方式

1、修改登錄成功后的跳轉

this.$router.push({path:?"/",query:?{code:?loginName} });

2、home 組件添加變量接收參數(shù)值

組件通訊-父組件傳遞到子組件

父組件傳遞數(shù)據(jù)到子組件的方法是在子組件定義 props ，本例中將 home 組件接收到的登錄名傳遞到 top-bar 組件中。

1、在 top-bar 組件中定義 props

2、修改 home 組件進行傳值

<top-bar?:code="loginName"></top-bar>

組件通訊-子組件傳遞到父組件

子組件傳遞到父組件使用 $emit ，本例中在 top-bar 組件中添加一個按鈕，點擊按鈕傳遞參數(shù)到 home 組件，并改變 home 組件的 loginName的值。

1、top-bar 組件中添加按鈕和相關事件

2、在 home 組件中進行事件接收

接口調用

在 Vue 中使用 axios 需要先進行插件的安裝

npm?install?axios?--save

axios 的使用請點擊「閱讀原文」查看示例代碼。

發(fā)布部署

發(fā)布

使用下面命令可以將項目發(fā)布到 dist 目錄中

npm?run?build

發(fā)布結果如下

部署到Docker

1、在 dist 目錄中創(chuàng)建 Dockerfile文件，文件內容如下

FROM?nginx:latest COPY?.?/usr/share/nginx/html/ EXPOSE?80 CMD?["nginx",?"-g",?"daemon?off;"]

2、進入到 dist目錄，執(zhí)行下面命令進行鏡像的構建

docker?build?-t?vue-demo?.

3、創(chuàng)建 nginx 配置文件，在執(zhí)行 docker run 時會將容器內的配置文件映射出來

server?{listen???????80;server_name??221.234.36.41;client_max_body_size?100M;location?/?{?root???/usr/share/nginx/html;index??index.html?index.htm;try_files?$uri?$uri/?/index.html;}error_page???500?502?503?504??/50x.html;location?=?/50x.html?{root???/usr/share/nginx/html;} }

3、執(zhí)行 docker run 創(chuàng)建容器

docker?run?-d?-p?9000:80?--name?vue-demo?-v?~/Documents/fengwei/projects/conf.d:/etc/nginx/conf.d:ro?--restart=always?vue-demo

在瀏覽器輸入 http://localhost:9000 可以查看運行效果。

示例代碼：https://github.com/oec2003/StudySamples/tree/master/VueSample/hello-world

希望本文對您有所幫助。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的.NET 程序员如何学习Vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。