vue客戶端項目的基本搭建以及ElementUI

本文轉載自查看原文 2020-06-22 18:19 560 Vue

1. 客戶端項目搭建

1.1 創建項目目錄（安裝時路由選y）

cd E:\vue_project\renran
vue init webpack renran_pc

之后用pycharm打開項目

1.2 初始化項目

清除默認的HelloWorld.vue組件和APP.vue中的默認模板代碼和默認css樣式,以及index.js中默認導入的HelloWorld

App.vue

<template>
  <div id="app">

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

瀏覽器訪問：就是空白

1.3 安裝路由vue-router

官方文檔：https://router.vuejs.org/zh/

1.3.1 下載安裝路由組件

npm i vue-router -S
# npm install vue-router --save

1.3.2 配置路由

1.3.2.1 初始化路由對象

在src目錄下創建router路由目錄，在router目錄下創建index.js路由文件

index.js路由文件中，編寫初始化路由對象的代碼 .

// 1. 引入vue和vue-router組件核心對象，並在vue中通過use注冊vue-router組件
import Vue from "vue";
import Router from "vue-router";

// 注冊第三方組件
Vue.use(Router);

// 導入組件
// 在vue中@表示src目錄的路徑
// import Home from "@/components/Home"

// 2. 暴露vue-router對象，並在vue-router里面編寫路由，提供給main.js調用
export default new Router({
  // 路由顯示模式，默認為hash(地址欄上面默認帶#，http://localhost:8080/#/login),設置路由模式為‘history’，去掉默認的#
  mode: "history",
  routes:[
    // 路由列表
    // {
    //   name:"路由名稱,也就是像django中別名[對應組件的name值，將來用於跳轉頁面]",
    //   path: "訪問url路徑",
    //   component: 組件名
    // },
  ]
})

1.3.2.2 注冊路由信息

打開main.js文件，把router路由規則對象注冊到vue中，代碼：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 注冊路由
import router from '@/router/index';
// import router from './router/index';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,      // 掛載路由對象，將來所有的路由對象的屬性或者方法，都可以通過vm來操作
  components: { App },
  template: '<App/>'
});

1.3.2.3 在視圖中顯示路由對應的內容

在App.vue組件中，添加顯示路由對應的內容。代碼：

<template>
  <div id="app">
    <!-- 調用路由組件，路由組件作用：識別訪問當前站點的url地址，獲取地址的路徑部分，到路由列表中識別判斷，標簽名必須是這個rouer-view -->
    <router-view/>
    <!--<router-view></router-view>-->
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

注意：如果在vue創建項目的時候，設置安裝vue-router，則項目會自動幫我們生成上面的router目錄和index.js里面的代碼，以及自動到main.js里面注冊路由對象。

示例：

index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

// 導入組件
// 在vue中@表示src目錄的路徑
import Home from "@/components/Home"
import Login from "../components/Login"

export default new Router({
  mode:"history",     // 路由顯示模式，默認為hash(地址欄上面默認帶#),設置路由模式為‘history’，去掉默認的#
  routes: [
    {
      path: "/home",   // 訪問url地址
      component: Home,  // 訪問url對應的組件
      name: "Home"      // 設置別名
    },
    {
      path: "/login",
      component: Login,
      name: "Login"
    }
  ]
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

Home.vue

<template>
    <div>
      Home組件代碼
    </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>

<template>
    <div>
      登錄頁面內容
    </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

瀏覽器訪問

1.3.3 路由對象提供的操作

在我們安裝注冊了vue-router組件以后，vue-router在vue項目中會幫我們在全局范圍內所有組件里面創建2個對象給我們使用：

this.$router，可用於在js代碼中進行頁面跳轉。
this.$route，可用於獲取地址欄上面的url參數。

1.3.3.1 頁面跳轉

在vue-router提供的操作中，進行頁面跳轉有2種方式：

使用<router-link to="url地址">來跳轉
在<script>中使用this.$router.push(url地址)來跳轉

在<script>中還可以使用this.$router.go(整數)，表示跳轉返回上一頁或者上幾頁，下一個或者下幾頁

1.3.3.1.1 router-link標簽

例如，我們就可以在Home.vue組件中，使用router-link跳轉到User.vue組件中。

routes/index.js，代碼：

// 1. 引入vue和vue-router組件核心對象，並在vue中通過use注冊vue-router組件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router); // Router是類
// 2. 暴露vue-router對象，並在vue-router里面編寫路由，提供給main.js調用

// 導入組件
// import 組件名 from "../components/組件名"
import Home from "../components/Home";
import User from "../components/User";

export default new Router({
  mode:"history",  // 路由地址的顯示模式： 默認hash，表示地址欄上面出現#
  routes:[
    // {
    //   name:"路由名稱[對應組件的name值，將來用於跳轉頁面]",
    //   path: "訪問url路徑",
    //   component: 組件名
    // },
    {
      name:"Home",
      path: "/",
      component: Home
    },{
      name:"User",
      path: "/user",
      component: User
    },
  ],
});

// vue-router除了可以進行組件和url地址的綁定以外，還可以
// 進行不同組件的頁面跳轉，

Home.vue代碼：

<template>
    <div>
      首頁頁面組件
      <a href="/user">個人中心</a>
      <!-- router-link標簽，本質上就是a標簽，只是由vue-router進行加工處理
      可以顯示局部頁面刷新，不會重新加載內容，進行ajax跳轉
       -->
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              url: "/user",
          }
        },
        methods:{

        }
    }
</script>

<style scoped>

</style>

1.3.3.1.2 `this.$router.push()`跳轉

<template>
    <div>
      首頁頁面組件
      <a href="/user">個人中心</a>
      <!-- router-link標簽，本質上就是a標簽，只是由vue-router進行加工處理
      可以顯示局部頁面刷新，不會重新加載內容，進行ajax跳轉
       -->
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
      <button @click="jump">個人中心</button>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 開發中可以先進行權限，登錄之類的判斷，然后再進行跳轉
                // this.$router.back(); // 返回上一頁，本質上就是 location.back()
                // this.$router.go(-1); // 返回上一頁，本質上就是 location.go()
                // this.$router.forward(); // 跳轉到下一頁，本質上就是 location.forward()
                this.$router.push("/user"); // 跳轉到站內的制定地址頁面中，本質上就是 location.href
                // 注意,this.$router.push() 不能跳轉到其他網站。如果真的要跳轉外站，則使用location.href="站外地址，記得加上http://協議"
          }
        }
    }
</script>

<style scoped>

</style>

1.3.3.2 參數傳遞

vue-router提供了this.$route，可以讓我們接收來自其他頁面的附帶參數。參數有2種：

查詢字符串(query string)，就是地址欄上面?號后面的參數，

例如：http://localhost:8008/user?name=xiaoming&pwd=123，這里name=xiaoming&pwd=123就是查詢字符串參數。
路由參數(router params)，就是地址欄上面路由路徑的一部分，

例如：http://localhost:8080/user/300/xiaoming，此時，300屬於路由路徑的一部分，這個300就是路由參數.，當然，xiaoming,或者user也可以理解是路由參數，就是看我們的頁面中是否需要接收而已。

1.3.3.2.1 獲取查詢字符串

1.必須先有一個頁面跳轉發送參數。例如，在Home組件中跳轉到User組件中，需要傳遞name和pwd查詢字符串。

Home.vue代碼：

<template>
    <div>
      首頁頁面組件
<!--      <a href="/user">個人中心</a>
      &lt;!&ndash; router-link標簽，本質上就是a標簽，只是由vue-router進行加工處理
      可以顯示局部頁面刷新，不會重新加載內容，進行ajax跳轉
       &ndash;&gt;
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
      <button @click="jump">個人中心</button>-->

      <router-link :to="`/user?name=${name}&pwd=${pwd}`">查詢字符串參數</router-link>
      <br>
      <router-link :to="/user?name='+name+'&pwd='+pwd">查詢字符串參數</router-link>
      <br>
      <router-link :to="{path:'/login',query:{'name':'xiaoming','pwd':'123'}}">傳遞查詢字符串參數</router-link>
      <br>
      <router-link :to="{name:'Login',query:{'name':'xiaoming','pwd':'123'}}">傳遞查詢字符串參數</router-link>
     
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              name: "xiaoming",
              pwd: "123",
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 開發中可以先進行權限，登錄之類的判斷，然后再進行跳轉
                // this.$router.back(); // 返回上一頁，本質上就是 location.back()
                // this.$router.go(-1); // 返回上一頁，本質上就是 location.go()
                // this.$router.forward(); // 跳轉到下一頁，本質上就是 location.forward()
                this.$router.push("/user"); // 跳轉到站內的制定地址頁面中，本質上就是 location.href
                // 注意,this.$router.push 不能跳轉到其他網站。如果真的要跳轉外站，則使用location.href="站外地址，記得加上http://協議"
          }
        }
    }
</script>

<style scoped>

</style>

2.可以下一個頁面中，這里代表的就是User組件，接收來自Home組件的參數。

<template>
    <div>
      用戶中心頁面組件
    </div>
</template>

<script>
    export default {
        name: "User",
        created() {
            // 接收地址欄上面的參數
            // this.$route是vue-router提供的一個用於接收地址參數的對象。
            // 經過main.js里面注冊router對象以后，
            // 將來在所有的子組件中，可以通過this.$route來獲取參數或者通過this.$router跳轉頁面
            // 查詢字符串參數
            // query是this.$route里面的一個數組，this.$route會自動收集地址欄上所有的參數保存到query里面
            // let name = this.$route.query.name;
            // let pwd = this.$route.query.pwd;
            // console.log(`name=${name}&pwd=${pwd}`);  // ``里面，${}圈住的內容會被js當成變量來解析
        }
    }
</script>

<style scoped>

</style>

頁面跳轉和參數傳遞綜合案例：

index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

// 導入組件
// 在vue中@表示src目錄的路徑
import Home from "@/components/Home"
import Login from "../components/Login"
import User from "../components/User"

export default new Router({
  mode:"history",     // 路由顯示模式，默認為hash(地址欄上面默認帶#),設置路由模式為‘history’，去掉默認的#
  routes: [
    {
      path: "/home",   // 訪問url地址
      component: Home,  // 訪問url對應的組件
      name: "Home"      // 設置別名
    },
    {
      path: "/login",
      component: Login,
      name: "Login"
    },
    {
      path: "/user/:name/:id", // 聲明當前地址的2個路由參數名！！！
      component: User, // 自動導包 Alt+Enter
      name: "User",
    }
  ]
})

index.js

Home.vue

<template>
    <div>
      Home組件代碼
      <h1>頁面跳轉</h1>
      <button @click="jump">使用this.$router來跳轉到登錄頁</button>
      <br>
      <router-link to="/login">使用router-link來跳轉到登錄頁</router-link>
      <br>
      <router-link :to="url">使用router-link通過變量來跳轉到登錄頁</router-link>
      <br>
      <router-link :to="{path:'/login'}">使用router-link通過路由列表中path來跳轉到登錄頁</router-link>
      <br>
      <router-link :to="{name:'Login'}">使用router-link通過反向解析來跳轉到登錄頁</router-link>
      <br>
      <a href="/login">使用a標簽跳轉到登錄頁</a>
      <h1>參數傳遞</h1>
      <button @click="func1">傳遞查詢字符串參數</button>
      <br>
      <router-link to="/login?name=xiaoming&pwd=123">傳遞查詢字符串參數</router-link>
      <br>
      <router-link :to="{path:'/login',query:{'name':'xiaoming','pwd':'123'}}">傳遞查詢字符串參數</router-link>
      <br>
      <router-link :to="{name:'Login',query:{'name':'xiaoming','pwd':'123'}}">傳遞查詢字符串參數</router-link>
      <br>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
            url:"/login",
          }
        },
        methods:{
          jump(){
            // 跳轉頁面可以使用this.$router
            // 跳轉頁面到站內的指定路由，如果希望跳轉到其他網站，
            // 則需要使用原生js提供的location.href="http://www.luffycity.com"
            this.$router.push("/login");

            /*
            this.$router.go(n); //  跳轉歷史記錄的n頁，n<0，則返回上n頁，n>0，則前進n頁
            this.$router.go(n); //  跳轉歷史記錄的n頁，n<0，則返回上n頁，n>0，則前進n頁
            this.$router.forward();  // 前進一頁
            this.$router.back();    // 返回上一頁
             *
             */
          },
          func1(){
            this.$router.push("/login?name=xiaoming&pwd=123");
          }
        }
    }
</script>

<style scoped>

</style>

Home.vue

<template>
    <div>
      登錄頁面內容
    </div>
</template>

<script>
    export default {
        name: "Login",
        created() {  // 需要提前接收參數或者接收服務端數據的初始化代碼都寫在created，此時頁面還沒有出來
          // this.$route的其他屬性
          console.log(this.$route.fullPath);  // /login?name=xiaoming&pwd=123  除了域名地址后面的所有內容
          console.log(this.$route.path);      // /login   去掉參數以后的路徑
          // 接收來自其他組件的查詢字符串參數[query srting]
          var name = this.$route.query.name;
          console.log(name);
        }
    }
</script>

<style scoped>

</style>

User.vue

<template>
    <div>
      <h1>用戶中心的內容</h1>
    </div>
</template>

<script>
    export default {
        name: "User",
        created(){
          // 接收路由參數
          console.log( this.$route.params ); // 獲取所有的路由參數
          console.log( this.$route.params.name ); // 獲取name參數
        }
    }
</script>

<style scoped>

</style>

User.vue

1.3.4.2 獲取路由參數

例如：我們用戶的界面都是一樣的，但是每一個用戶來到自己的頁面中，顯示的內容肯定都是不一樣的，此時，我們需要使用不同的路徑來區分不同的用戶。這時候，可以在路由路徑中使用路由參數表示不同用戶的id

例如：我們就需要設置一個route/index.js中路由信息里面，哪一段路由屬於路由參數。

src/routes/index.js設置路由參數。

// 1. 引入vue和vue-router組件核心對象，並在vue中通過use注冊vue-router組件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router); // Router是類
// 2. 暴露vue-router對象，並在vue-router里面編寫路由，提供給main.js調用

// 導入組件
// import 組件名 from "../components/組件名"
import Home from "../components/Home";
import User from "../components/User";

export default new Router({
  mode:"history",  // 路由地址的顯示模式： 默認hash，表示地址欄上面出現#
  routes:[
    // {
    //   name:"路由名稱[對應組件的name值，將來用於跳轉頁面]",
    //   path: "訪問url路徑",
    //   component: 組件名
    // },
    {
      name:"Home",
      path: "/",
      component: Home
    },{
      name:"User",
      path: "/user/:id/img-:img_id",
      component: User
    },
  ],
});

// vue-router除了可以進行組件和url地址的綁定以外，還可以
// 進行不同組件的頁面跳轉，

然后我們就是在Home中如果需要轉到User里面。

Home.vue代碼：

<template>
    <div>
      首頁頁面組件
<!--      <a href="/user">個人中心</a>
      &lt;!&ndash; router-link標簽，本質上就是a標簽，只是由vue-router進行加工處理
      可以顯示局部頁面刷新，不會重新加載內容，進行ajax跳轉
       &ndash;&gt;
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
      <button @click="jump">個人中心</button>-->

<!--      <router-link :to="`/user?name=${name}&pwd=${pwd}`">查詢字符串參數</router-link>-->
<!--      <router-link :to="'/user?name='+name+'&pwd='+pwd">查詢字符串參數</router-link>-->
      <router-link to="/user/100/img-10086">路由參數</router-link>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              name: "xiaoming",
              pwd: "123",
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 開發中可以先進行權限，登錄之類的判斷，然后再進行跳轉
                // this.$router.back(); // 返回上一頁，本質上就是 location.back()
                // this.$router.go(-1); // 返回上一頁，本質上就是 location.go()
                // this.$router.forward(); // 跳轉到下一頁，本質上就是 location.forward()
                this.$router.push("/user"); // 跳轉到站內的制定地址頁面中，本質上就是 location.href
                // 注意,this.$router.push 不能跳轉到其他網站。如果真的要跳轉外站，則使用location.href="站外地址，記得加上http://協議"
          }
        }
    }
</script>

<style scoped>

</style>

User.vue，組件中可以通過this.$route.params接收路由參數。

<template>
    <div>
      用戶中心頁面組件
    </div>
</template>

<script>
    export default {
        name: "User",
        created() {
            // 接收地址欄上面的參數
            // this.$route是vue-router提供的一個用於接收地址參數的對象。
            // 經過main.js里面注冊router對象以后，
            // 將來在所有的子組件中，可以通過this.$route來獲取參數或者通過this.$router跳轉頁面

            // 查詢字符串參數
            // query是this.$route里面的一個數組，this.$route會自動收集地址欄上所有的參數保存到query里面
            // let name = this.$route.query.name;
            // let pwd = this.$route.query.pwd;
            // console.log(`name=${name}&pwd=${pwd}`);  // ``里面，${}圈住的內容會被js當成變量來解析

            // 路由參數
            // params是this.$route里面的一個數組，this.$route會自動收集路由列表中已經標記為路由參數所有內容保存到params中
            let id = this.$route.params.id;
            console.log(id);
            let img_id = this.$route.params.img_id;
            console.log(`img_id = ${img_id}`);
        }
    }
</script>

<style scoped>

</style>

2. ElementUI

對於前端頁面布局，我們可以使用一些開源的UI框架來配合開發，常用的UI框: bootstrap，H-ui框架，lay-UI框架，Amaze UI，zui框架，ElementUI.

Vue開發前端項目中，比較常用的就是ElementUI了。

ElementUI是餓了么團隊開發的一個UI組件框架，這個框架提前幫我們提供了很多已經寫好的通用模塊，我們可以在Vue項目中引入來使用，這個框架的使用類似於我們前面學習的bootstrap框架，也就是說，我們完全可以把官方文檔中的組件代碼拿來就用，有定制性的內容，可以直接通過樣式進行覆蓋修改就可以了。

中文官網：http://element-cn.eleme.io/#/zh-CN

文檔快速入門：http://element-cn.eleme.io/#/zh-CN/component/quickstart

2.1 快速安裝ElementUI

項目根目錄執行以下命令:

npm i element-ui -S
# 上面的命令等同於 `npm install element-ui --save`

2.2 配置ElementUI到項目中

在main.js中導入ElementUI，並調用。代碼：

// elementUI 導入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 調用插件
Vue.use(ElementUI);

成功引入了ElementUI以后，在組件中直接使用

<template>
    <div>
      <h1>用戶中心的內容</h1>
      <i class="el-icon-edit"></i>
    </div>
</template>

免責聲明！

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

猜您在找 vue pc客戶端項目總結【原創】從零開始搭建Electron+Vue+Webpack項目框架（六）Electron打包，同時構建客戶端和web端從0開始搭建kafka客戶端 Blazor server side 自家的一些開源的, 實用型項目的進度之 CEF客戶端如何從github下載項目的源代碼，包含git客戶端，直接下載，vs下載推薦一個適用於SpringBoot項目的輕量級HTTP客戶端框架，快來試試它! Electron-vue搭建vue全家桶+Element UI客戶端（一） SVN搭建以及客戶端使用 Locust fasthttplocust客戶端環境搭建以太坊客戶端Geth搭建

vue客戶端項目的基本搭建以及ElementUI

1. 客戶端項目搭建

1.1 創建項目目錄（安裝時路由選y）

1.2 初始化項目

1.3 安裝路由vue-router

1.3.1 下載安裝路由組件

1.3.2 配置路由

1.3.2.1 初始化路由對象

1.3.2.2 注冊路由信息

1.3.2.3 在視圖中顯示路由對應的內容

1.3.3 路由對象提供的操作

1.3.3.1 頁面跳轉

1.3.3.1.1 router-link標簽

1.3.3.1.2 this.$router.push()跳轉

1.3.3.2 參數傳遞

1.3.3.2.1 獲取查詢字符串

1.3.4.2 獲取路由參數

2. ElementUI

2.1 快速安裝ElementUI

2.2 配置ElementUI到項目中

免責聲明！

1.3.3.1.2 `this.$router.push()`跳轉